Home > Article > Web Front-end > About event bubbling and event capturing mechanism in javascript
About event bubbling and event capturing mechanism in javascript
- 巴扎黑Original
- 2017-09-02 13:30:331726browse
This article mainly introduces relevant information on the detailed explanation of event bubbling and event capture mechanisms in JavaScript. There is a lot of relevant information on the Internet, but it is not very clear. Through this article, I hope that everyone can understand and master it. Friends who need it You can refer to the following
detailed explanation of event bubbling and event capture mechanisms in javascript
The role of both:Describe event triggering timing issues
Event capture: From the document to the node that triggers the event, that is, from top to bottom to trigger the event---from outside to inside
Event Bubbling: Trigger events from bottom up---from inside to outside
The third parameter of the binding event method is to control whether the event triggering sequence is event capture
true, event capture; false, event bubbling
The general default is false, that is, event bubbling
Jquery’s e.stopPropagation will prevent bubbling , which means that ancestor-level events should not be triggered until the DOM
The following is an example I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡与事件捕获</title>
<script>
window.onload = function () {
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发，"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发，"+this.id)
},true)
}
</script>
</head>
<body>
<p id="parent">
parent事件
<p id="child" class="child">
child事件
</p>
</p>
</body>
</html> In the example, I added a third true, which is event capture.
If not added, the default event bubbling is used. At this time, the event triggering sequence is from the inside out
The above is the detailed content of About event bubbling and event capturing mechanism in javascript. For more information, please follow other related articles on the PHP Chinese website!