Detailed explanation of javascript event bubbling capture and prevent event propagation sample code

1. What is event bubbling?

In the sorting algorithm, we have learned the bubble sorting method. The so-called bubbling is to let the underlying things surface. The same is true for event bubbling.

The following Let's look at an example to illustrate what event bubbling is.

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

When event bubbling is supported, when we click the "Test" button, the first thing that will be executed is alert("button"), which means:

Events are triggered in order from the most specific event target to the least specific event target (document object).

When p, button, and html root elements all have events, the order of event execution is:

button->p->html

2 .What is event capture?

Let’s look at event capture again. Compared with event capture, the order of processing time is completely opposite to event bubbling. Similarly:

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

Execution This code will first alert("p"), and secondly alert("button"). We clarify the concept of event capture:

Events are triggered starting from the least accurate object (document object), and then to the most accurate.

Similarly, if there are binding events on the button, p, and html elements, the execution order of the events is:

html->p->button

3. What are the event processing mechanisms of various versions of browsers?

(1) In DOM, it supports event bubbling and event capture. In the W3C standard, it is considered that any event starts from event capture and finds the final node. If you continue bubbling, you will reach the root node.

The functions that support event binding in DOM are:

addEventListener("事件名"，函数，userCapture);

For the userCapture parameter, the default is false, and event bubbling is supported.
If the userCapture parameter is true, event capture is supported.

(2) For many browsers, the addEventListener method is supported, but IE does not support it!

(3) Event processing mechanism in IE. IE only supports event bubbling. IE has a unique event binding method

attachEvent method. This method has two parameters. ：

attachEvent("事件名"，"函数名")

4. How to prevent the spread of the incident?

Both event bubbling and event capturing can be prevented.

(1) First, the method to prevent event propagation in W3C is: stopPropagation(), in IE, by setting

cancelBubble=true;

(2) How Default behavior for blocking events? In the W3C standard, use the preventDefault method, in IE by setting

window.event.returnValue = false;

The above is the detailed content of Detailed explanation of javascript event bubbling capture and prevent event propagation sample code. For more information, please follow other related articles on the PHP Chinese website!