jQuery event bubbling

jQuery event bubble explanation

Official interpretation:

Trigger a certain type of event on an object (for example, click onclick event). If the object defines a handler for this event, the event will call this handler. If the event handler is not defined or the event returns true, the event will propagate to the parent object of this object from the inside to the outside until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object hierarchy, that is, the document object (some browsers are window).

Grassroots interpretation:

When we trigger an event on an element, such as a mouse movement event, the event bound to the element will also affect its child elements, or when an event is triggered on an element, the event bound to the element will also affect its parent element, or even directly affect the top-level parent element. This phenomenon is called "event bubbling" "The reason why it is called event bubbling is that the response of the event will rise to the top object like a bubble.

Event bubbling example

If we define multiple events in a page, such as mouse click events, and the elements bound by these events are nested, the event bubble will occur. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(){
					alert("bbb");
				});
				$("a").click(function(){
					alert("ccc");
				});
			});
		</script>
	</head>

	<body>
		<div>
			<a href="javascript:;">Click the button</a>
		</div>
	</body>
</html>

There are three events in the above code: body, div and a tags are bound to click events. When you click a tag in the page, three prompt boxes will pop up continuously, which is the phenomenon caused by event bubbling. The order of pop-up boxes are ccc, bbb and aaa, indicating that the process of event bubbling is: a -- > div -- > body. A bubbling to div bubbling to body.

Role of event bubbling

Event bubbling allows multiple operations to be processed centrally (adding an event handler to a parent element instead of adding an event handler to multiple child elements). It also allows you to capture events at different levels of the object layer.

Prevent event bubbling

explain:

In the above code, we only want to trigger the onclick event of < a > element, but the < div >, < body > events are triggered at the same time. Therefore, we must limit the scope of action of the event. When clicking the onclick event of < a > element, only the event of < a > itself is triggered. Because the methods of implementing event objects are different between IE Dom and standard DOM, it is difficult to obtain events in different browsers Object becomes more difficult. If we want to prevent the delivery of events, we can use event.stopPropagation() to prevent the delivery of events.

Method 1: use the stopPropagation() function

Code example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(e){
					alert("bbb");
					//Stop bubbling
					e.stopPropagation();
				});
				$("a").click(function(){
					//Do not prevent bubbling
					alert("ccc");
				});
			});
		</script>
	</head>

	<body>
		<div>
			<a href="javascript:;">Click the button</a>
		</div>
	</body>
</html>

In the above code, event bubbling is blocked for < div >. After clicking the hyperlink, only pop-up boxes showing ccc and bbb will pop up, indicating that event bubbling is blocked when it reaches the div layer and will not continue bubbling to the outer layer.

Method 2: use return false to prevent bubbling

Code example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(){
					alert("bbb");
					//Stop bubbling
					return false;
				});
				$("a").click(function(){
					//Do not prevent bubbling
					alert("ccc");
				});
			});
		</script>
	</head>

	<body>
		<div>
			<a href="javascript:;">Click the button</a>
		</div>
	</body>
</html>

The above code effect is the same as method 1. In jQuery, event.stopPropagation() and return false have the same effect on bubble prevention.

The difference between mouseenter() and mouseover() events

The mouseenter event is triggered only when the mouse moves over the selected element (there is no event bubble), and the mouseover event is triggered when the mouse moves over the selected element and its child elements (there is event bubble).

Code example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            x=0;
            y=0;
            $(document).ready(function(){
              $("div.over").mouseover(function(){
                $(".over span").text(x+=1);
              });
              $("div.enter").mouseenter(function(){
                $(".enter span").text(y+=1);
              });
            });
        </script>
    </head>
    <body>
        <div class="over" 
             style="background-color:lightgray;padding:20px;width:250px;float:left">
            <h3 
                style="background-color:white;">
                Mouseover Event trigger: 
                <span></span
             ></h3>
        </div>

        <div class="enter" 
             style="background-color:lightgray;padding:20px;width:250px;float:right">
            <h3 
                style="background-color:white;">
                Mouseenter Event trigger: 
                <span></span>
            </h3>
        </div>

    </body>
</html>

In the above code, when the mouse moves into the element where mouseover is located and its child elements, the mouseover event will be triggered, and there is event bubbling. When the mouse moves into the element where mouseenter is located, the mouseenter event will be triggered, but when the mouse moves into its child elements < span > < / span >, the mouseenter event will not be triggered, which proves that there is no event bubbling.

The difference between mouseleave() and mouseout() events

The mouseout event is triggered when the mouse leaves any child element and the selected element (there is event bubbling), and the mouseleave event is triggered only when the mouse leaves the selected element (there is no event bubbling).

Code example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            x=0;
            y=0;
            $(document).ready(function(){
              $("div.over").mouseout(function(){
                $(".over span").text(x+=1);
              });
              $("div.enter").mouseleave(function(){
                $(".enter span").text(y+=1);
              });
            });
        </script>
    </head>
    <body>
        <div class="over" 
             style="background-color:lightgray;padding:20px;width:250px;float:left">
            <h3 
                style="background-color:white;">
                Mouseout Event trigger: 
                <span></span
             ></h3>
        </div>

        <div class="enter" 
             style="background-color:lightgray;padding:20px;width:250px;float:right">
            <h3 
                style="background-color:white;">
                Mouseleave Event trigger: 
                <span></span>
            </h3>
        </div>

    </body>
</html>

In the above code, when the mouse moves out of the element where mouseout is located and its child elements, the mouseout event will be triggered, and there is event bubbling. When the mouse moves out of the element where mouseleave is located, the mouseleave event will be triggered, but when the mouse moves out of its child elements < span > < / span >, the mouseleave event will not be triggered, which proves that there is no event bubbling.

summary

Event bubbling is the default behavior in the browser, such as the event that triggers an element binding. If its parent element or child element has the same event binding, the events will be executed layer by layer. We call this behavior "event bubbling". To prevent browser event bubbling, you can use event.stopPropagation() in the event object Method or return false directly in the callback function of the event.

When using the mouse to move in and out events, different event methods are selected according to the actual needs of the business. If event bubbling is required, mouseover and mouseout events can be used. If event bubbling is not required, mouseenter and mouseleave events can be used.

Tags: Javascript Front-end JQuery

Posted on Mon, 29 Nov 2021 00:51:56 -0500 by jbrill