Sample code:

< div class = "grandpa" > < div class = "dad" > < div class = "son" > text < / div > < / div > < / div >Copy the code

Grandpa >. Dad >. Son, add event listener fnYe/fnBa/fnEr to each div



Question 1: Who was clicked on?

Click text, calculate not click son

Click on the text, calculate not click dad

Click text, calculate not click grandpa

A: is



Question 2: Call order? Which of the fnYe/fnBa/fnEr functions is called first when you click on the text?

The call sequence is fnEr >fnBa >fnYe for IE5 and fnYe >fnBa >fnEr for Netscape



So in 2002, the W3C published a standard called DOM Level 2 Events Specification specifying that browsers support both call orders. See if there are functions listening in the order of grandpa -> Dad -> son, then see if there are functions listening in the order of son -> Dad -> Grandfather.



Thus, in technical terms these two sequences are event capture and event bubbling in the DOM event model, respectively. Propagation between child elements and parent elements after an event occurs.

Looking for a listener function from the outside in is called event listener.

Looking for listener functions from inside out is called event bubbling.



Text (in the sample code) is the target of event listening and event bubbling. So the DOM event model is divided into three phases:

(1) Capture phase: the phase in which the event propagates from the Window object down to the target node (simplified to grandpa -> Dad -> son in the example code);

(2) Target stage: the stage when the real target node is processing events; (In sample code: text)

(3) Bubble stage: the stage in which the event propagates from the target node to the Window object bottom-up (simplified to: son -> Dad -> Grandpa in the example code).

Schematic diagram of complete DOM event model:





Event binding:

IE5: baba. AttachEvent (‘ onclick ‘, fn)// The event bubbles

Netscape: baba.addeventListener (‘ click ‘, fn)// Event capture

W3C: baba.addeventListener (‘ click ‘, fn, bool), fn uses event bubble if bool is not passed or falsy, otherwise FN uses event capture.



DOM Event level

DOM levels can be divided into four levels: DOM0, DOM1, DOM2, and DOM3. DOM events are divided into three levels: DOM 0 level event processing, DOM 2 level event processing and DOM 3 level event processing. There are no DOM 1 level events because there is no DOM 1 level event content.



DOM 0-level events

It is not allowed to bind multiple events of the same type to the same element/tag. DOM0 event binding, binding methods to the element’s event behavior that are executed during the bubbling (or target) phase of the current element’s event behavior.



DOM level 2 events

el.addEventListener(event-name, callback, useCapture)

Event-name: indicates the event name, which can be a standard DOM event

Callback: A callback function that is injected with an argument to the current event object, event, when an event is triggered

UseCapture: The default is false, indicating that the event handle is executed during the bubble phase

AddEventListener () and removeEventListener() are not supported in IE9. AttachEvent () and detachEvent() are used instead. The first event name is preceded by on.



DOM level 3 events add more event types to the DOM Level 2 events.

UI events that are triggered when the user interacts with elements on the page, such as Load and Scroll

Focus events, which are triggered when an element gains or loses focus, such as blur and focus

Mouse events, such as dblclick and mouseup, are triggered when the user performs actions on the page using the mouse

A wheel event that is triggered when a mousewheel or similar device is used, such as mousewheel

A text event that is triggered when text is entered into a document, such as textInput

Keyboard events, such as keyDown and keyPress, are triggered when users perform operations on the page using the keyboard

A composite event that is triggered when a character is entered for the IME, such as compositionStart

Change event, triggered when the underlying DOM structure changes, such as DOMsubtreeModified

DOM3 events also allow users to customize some events.