JavaScript event broker and delegate instance analysis _javascript tips

In JavaScript, you often encounter situations where you want to listen to multiple Li in a list, assuming we have a list of the following:

Copy Code code as follows:

<ul id= "List" >
<li id= "Item1" >item1</li>
<li id= "Item2" >item2</li>
<li id= "Item3" >item3</li>
<li id= "Item4" >item4</li>
</ul>

If we want to achieve the following functions: When the mouse clicks on an Li, alert outputs the contents of the Li, our usual way of writing is this:

Add the onclick event directly to each Li when the list item is less
List items for a long time, in the onload to each list item call listener
The first method is straightforward, but does not take into account the separation of HTML from JavaScript, is not recommended, and the second method has the following code:

Copy Code code as follows:

Window.onload=function () {
var Ulnode=document.getelementbyid ("list");
var linodes=ulnode.childnodes| | Ulnode.children;
for (Var i=0;i<linodes.length;i++) {
Linodes[i].addeventlistener (' click ', Function (e) {
alert (e.target.innerhtml);
},false);
}
}

As can be seen from the above, if the continuous deletion or add Li, then function () will be constantly changing the operation, easy to error, so the use of event agent, before using the event agent, we first to understand the incident phase (event phase):

Event phase:

When a DOM event is triggered, it is not only triggered once on its origin object, but it goes through three different stages. In short: The event starts from the root node of the document to the target object (the capture phase), then triggers the target pair up (the target phase), and then back to the root node (bubbling phase) of the document as shown (the picture is from the consortium):

Event Capture Phase (Capture Phase)

The first phase of the event is the capture phase. The event starts at the root node of the document and flows to the target node of the event with the structure of the DOM tree. The path passes through various levels of DOM nodes and triggers the capture event on each node until the target node of the arrival time. The main task of the capture phase is the resume propagation path, which, during the bubbling phase, is traced back to the document root node through this path.

Copy Code code as follows:

Element.removeeventlistener (&LTEVENT-NAME>, <callback>, <use-capture>);

We set up the listener for the node through the above function, and we can add a listener callback function to the capture phase of the event by setting it to true. In practice, we don't have much use for the capture phase, but by handling events during the capture phase, we can prevent similar click events from being triggered on a particular element.

Copy Code code as follows:

var form=document.queryseletor (' form ');
Form.addeventlistener (' click ', Function (e) {
E.stoppropagation ();
},true);

If you are not familiar with this usage, it is best to set it to false or undefined to monitor the event during the bubbling phase.

Goal phase (target Phase)

When the event arrives at the target node, the event enters the target phase. The event is triggered on the target node and then reverse-reflow, knowing that the outermost document node is propagated.

For multi-tiered nested nodes, mouse and pointer events are often positioned over the innermost elements. Suppose you set the listener function on a DIV element and the user clicks on the P element inside the div element, then the P element is the target element of that time. Event bubbling allows us to listen for the Click event on this div or higher element, and to trigger the callback function during time propagation.

Bubbling phase (Bubble Phase)

Event is not terminated on this element after it has been triggered on the target event. It bubbles up with the DOM tree layer up until it reaches the outermost root node. That is, the same event is once in the parent node of the target node, the parent node ... Until the outermost node is triggered.

Most events are bubbling, but not all of them. Concrete Visible: Specification Description

From the top we can think of, you can use the event agent to implement the monitoring of each li. The code is as follows:

Copy Code code as follows:

Window.onload=function () {
var Ulnode=document.getelementbyid ("list");
Ulnode.addeventlistener (' click ', Function (e) {
if (e.target&&e.target.nodename.touppercase () = = "LI") {/* Determine if the target event is li*/
alert (e.target.innerhtml);
}
},false);
};

The above is the entire contents of this article, I hope to be familiar with the JavaScript event delegates and agents can help.

Please take a moment to share the article with your friends or leave a comment. We will sincerely thank you for your support!