JQuery event propagation, event stream, and jquery event Propagation

JQuery event propagation, event stream, and jquery event Propagation

I. jQuery event Propagation

In the DOM2 event model, once an event is triggered, the event stream first spreads down from the top of the DOM tree (document node) until the target node, and then spread from the target node to the top of the DOM tree. The process from top to bottom is called the capture stage, and the process from bottom to top is called the bubble stage.

Use the loop body structure to register a capture type mouse-click class event handler function for the button element and all its parent nodes.

Sample Code:

<! DOCTYPE html> 

Next, modify the 3rd parameters of the addEventListener () method and set the parameter value to false, that is, to register the event as a bubble handler.

<Script type = "text/javascript"> window. onload = function () {var btn = document. getElementsByTagName ("input") [0]; // obtain the button var p = document. getElementsByTagName ("p") [0]; // p element var I = 1; // declare and initialize a temporary variable do {// use the do loop structure to register and click the event btn layer by layer. addEventListener ("click", function () {// register the mouse to click event p. innerHTML + = "<br/> (" + I ++ ")" + this. nodeName ;}, false); // dynamically tracks the name of the current response node. this. removeEventListener ("click", arguments. callee, false); // cancel the current mouse click event btn = btn. parentNode; // access the parent element at the upper level} while (btn); // set the cycle condition. If a parent node exists} </script>



Ii. jQuery event stream
Sample Code:
<! DOCTYPE html>