Event DOM and delegation

https://www.cnblogs.com/bfgis/p/5460191.html

3 type of event model:

dom0 model, dom2 model, IE event model

addEventListener

target.addEventListener(type, listener, options);

type: error, click, focus, blur, open, cloase, load

listener: ()=>{}

option: default false, false: run on bubble, true: run on capture.

dom 0 event model:

1. bind use element property:

<button onclick="click()">click</button>

2. get the element, then bind it using adding values.

const btn = document.getElementById('btn')
btn.onclick = function(){// do }
btn.onclick = null 

this will not spread, only bind 1 event

Dom2 event model:

3 process in each event: capture, process, bubbling

use addEventListener() to add event listener

IE event model

2 process, no capture, process and bubbling

use attachEvent() to add event listener

capturing

Here’s an example.

document.addEventListener('focus', function (event) {
	console.log(event.target);
}, false);

You can focus on things over and over again, but the event callback will never run.

There’s a trick you can use to capture the event, though. The last argument in addEventListener() is called useCapture. We almost always set it to false.

For events that don’t bubble, set it to true to capture the event anyways.

Bubbling

When an event triggers on a DOM element, it will attempt to handle the vent if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. The bubbling occurs up the element's ancestors all the way to the document. Event bubbling is the mechanism behind event delegation.

var logEvent = function(event) {
    console.log(event.target);
};
document.querySelector('main').addEventListener('input', logEvent, false);
document.querySelector('div').addEventListener('input', logEvent, false);
document.querySelector('input').addEventListener('input', logEvent, false);

How to stop Event bubbling and capturing during Event delegation

e.stopPropagation()

Event Delegation vs Event Bubbling

Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it.

Event bubbling is what the event itself does.

delegation 委托

delegation element events to other elements using bubbling.

you select any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.

Remember, bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.

　　addEventListener(event, listener, useCapture)　　

useCapture : true: capturing, useCapture = false : bubbling

Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it.

Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM.

The benefits of this technique are:

• Memory footprint goes down (because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant)

• dynamics binding There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

For example, if you wanted to detect any time any field changed in value inside a specific form, you could do this:

var form = document.querySelector('#hogwarts-application');

// Listen for changes to fields inside the form
form.addEventListener('input', function (event) {

	// Log the field that was changed
	console.log(event.target);

}, false);

https://learn.jquery.com/events/event-delegation/