DOM events & event delegates

What is the DOM

Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML)

In short, it connects a Web page to a script or programming language.

The DOM event flow

The event flow describes the order in which events are received from the page

Events are propagated in a specific order between element nodes when they are sent, and this propagation process is called the DOM event stream

Let’s say we register a click event for a div:

Capture phase
Current target stage
Bubbling phase

Event capture:As first proposed by IE, events are accepted by the most concrete elements and then propagated up the hierarchy to the topmost node of the DOM.
- That is, look for listener functions from the outside in
Event capture:First proposed by Netscape, the process of starting with the topmost node of the DOM and propagating down to the most concrete element.
- That is, look for the listener function from the inside out

Here’s an example:

If we throw a stone into the water, first of all it will descend, and this process can be understood as capture. Bubbles are then created and float on the water, the process equivalent to event bubbling.

Code verification:

Special case

If only one div is being listened on, the FN function listens for the click event on the capture node and the bubble node, respectively.

div.addEventListener('click',f1)   / / the bubbling
div.addEventListener('click',f2,true)   / / capture
Copy the code

Excuse me, who goes first? Answer: Who listens first who executes first.

The event object

eventTarget.onclick = funciton(event){
	// This evnet is the event object, which I prefer to abbreviate to e
}
eventTarget.addEventListener('click'.function(event){
	// This evnet is the event object, which I prefer to abbreviate to e
})
Copy the code

The event is a parameter, and the system will automatically change it to an event object, without passing an argument.

When we register an event, the event object is automatically created by the system and passed in turn to event listeners (event handlers)

The difference between E. target and E. Currenttarget

E.target: Returns the object that triggered the event. That is, the object that the user operates on. (Assumption: Whoever you click on is who you are)
E. currenttarget: The element that the programmer listens for, that is, whoever you bind to
This is the e.c. with our fabrication: urrentTarget

Just print it out:

The event object blocks the default behavior

Capture is not blocked, cancelled, bubbling is.

e.stopPropagation()You can cancel the bubble and the browser will no longer go up.
e.preventDefault()You can cancel the default event

Event delegation

How it works: Instead of setting event listeners individually for each child node, event listeners are set on its parent node and then influence the setting of each child node using the bubbling principle.

For example, register a click event for the UL list, and then use the target of the event object to find the currently clicked Li. Since li was clicked, the event will bubble up to UL, and since UL has a registration event, the event listener will be triggered.

Function: This allows us to manipulate the DOM only once, saving memory and listening for dynamic elements

How do I listen for an element that doesn’t exist?

You can use event delegates to listen on the parent element.

Code display:

Encapsulating event delegate

Write a function on(‘click’,’#div1′,’button’,fn) to call fn when the user clicks on the button element in #div1. Ask for event delegates.