Home > Developer > Web Develop
Add events in jquery (4) Events in jquery-bubble and complement jquery
Event
When we open a page, the browser will explain and execute the page, which is actually driven by the execution event. when loading the page event, we will execute the Load () event, this event implements the process of interpreting and executing code in the browser.
Event mechanism event bubblesBubbling refers to the event execution sequence. When an event is triggered on an object, if the event handler is not defined or the event returns true, this event will be propagated to the parent object of this object, from the inside out to the outside until it is processed (all similar events of the parent object are activated ), or it reaches the top level of the object hierarchy (that is, the document Object ).
To put it bluntly, we divide a cup of water into several layers of different colors. when the water is heated, when a bubble appears at the bottom layer, the bubbles will rise layer by layer until the top layer. We can capture this bubble no matter which layer we observe. This cup of water is our "DOM" and "bubble" is our thing bubble.
Event bubble exampleThe following code is used:
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Result 1:
Figure 1
From this we can see that for the same event (both onclick events), the first is the underlying trigger, and then the last trigger event, that is, "from the inside out".
When we change the h5 tag event of the parent class to onmousedown, we will see the following results. Although it should be the first trigger of the layer for bubbling, The onclick event is triggered when the event onmousedown occurs.
Figure 2
So how to prevent bubbles?Js prevents bubbling
The following code is used:
<Span style = "font-size: 14px;"> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jquery prevents bubblesIf you use jquery for access, the method to prevent the bubble phenomenon is as follows:
<span style="font-size:14px;"> $(function() { $("a").click(function(event) { return false; }); });</span>Or<span style="font-size:14px;">$(function() { $("a").click(function(event) { event.stopPropagation(); }); });</span>After the above execution, we will find that, after the return false statement is executed, the <a> tag will not jump, but all others will jump. How can we prevent the default event redirect behavior?
Another method is event. preventDefault (). This method does not handle event bubbles, but blocks the default behavior of events. The return false method blocks both the bubble action and the default action of the event. event. stopPropagation () only blocks the event bubble action, but does not block the default action of the event.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
