This article describes JavaScript catching events and blocking bubble events. Share it for your reference, as follows:
Today, an exception occurred in the project program and later found that it was related to the bubble event. Take this opportunity to explore using Javascript to capture and bubble events.
1. To explore capture and bubble events, you must first know what capture and bubble events are, so start with the concept;
Bubble of events: Triggers a certain type of event on an object (such as clicking onclick event). If this object defines the handler for this event, then this event will call this handler. If this event handler is not defined or the event returns true, then the event will propagate to the parent object of this object, from the inside out, until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object level, that is, the document object (some browsers are windows).
In fact, event bubbles are a process of bubbles from descendants to ancestor nodes, while capture is a process from ancestor nodes to descend nodes.
For the sake of convenience, I use first to capture and then bubble, and capture from top to bottom, bubble from bottom to top to remember. I remember where I saw it. Some people compared capture to stones sinking into the sea, and bubbles to bubbles coming out of the water. Of course, the depth of capture depends on your DOM layout, the seabed is a bit deeper, ^_^
Note: IE6, IE7, and IE8 only support bubble streams, but not capture streams.
2. Why stop bubble events
Someone may ask: Why should we stop bubbling events? What's the use of preventing bubble events?
Let’s talk about why we should stop bubble events:
Let me give you an example first, as follows:
<html>
<div id='div_1' onclick="alert('I'm First!')">
<div id='div_2' onclick="alert('I'm Second!')">
<a onclick="alert('I'm Third!')" href="" rel="external nofollow" >Click Here</a>
</div>
</div>
</html>
From the above code, we can see that div_1 is the container of div_2, and div_2 is the container of a, with a total of three layers.
When we run this example, click here, we will find that three alert prompt boxes pop up, and the order isI'm Third! 、I'm Second!、I'm First!, this is in line with the concept of bubbling mentioned above.
And this is the problem I encountered this time, which I call "event overlap".
This situation will definitely not work, so we need to prevent the incident from bubbled. So how can we stop it? Next will.
3. Methods to prevent events from bubbled
First, I will give a pure JavaScript version of writing:
function aOnClick(e){
? = true : ();
}
explain:Because the way to stop bubbles in IE is = true, other browsers are();So it is compatible here.
Let me give you another jQuery version writing method:
$(function() {
$("#alink").click(function(event) {
();
});
});
4. Other methods and differences to prevent bubbles
I just used the function above to prevent bubbles, but there are other ways to achieve similar effects, but it is still different;
$("#alink").click(function(event) {
return false;
});
explain:The above method uses jQuery to operate on the link. After testing, it concluded that the function prevents bubbles, but it also blocks a's default behavior (here is the href attribute). This is the difference.
By the way, javascript's method to block default behavior
();
As can be seen from the above,return false;yes();andPreventDefault()union of .
Let’s just come here!
For more information about JavaScript, readers who are interested in reading this site's special topic:A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript page element operation skills》、《Summary of JavaScript DOM skills》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript Errors and Debugging Skills》
I hope this article will be helpful to everyone's JavaScript programming.