Analysis of DOM event bubbling examples in JQuery_jquery

This article analyzes DOM event bubbling in JQuery through examples. Share it with everyone for your reference. The specific analysis is as follows:

What is bubbling

There can be multiple events on the page, and multiple elements can respond to the same event. Suppose there are two elements on the web page, one element is nested in the other element, and both are bound to click events. At the same time, the click event is also bound to the body element.

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

When the internal span element is clicked, that is, the click event of the span element is triggered, 3 records will be output. Just clicking on the inner span element will trigger the click event bound on the outer div element and body element. This is caused by event bubbling. While clicking the span element, you also click the element div containing the span element and the element body containing the div element, and each element will respond to the click event in a specific order.

The click event of the

element will "bubble" in the following order.

1. 45a2772a6b6107b401db3c9b82c049c2
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 6c04bd5ca3fcae76e30b72ad730ca86d

The reason why it is called bubbling is because the event will continue to rise to the top like a bubble according to the DOM hierarchy.

Problems caused by event bubbling

Event bubbling may cause unexpected effects. In the above example, we originally only wanted to trigger the click event of the 45a2772a6b6107b401db3c9b82c049c2 element, but the click events of the dc6dce4a544fdca2df29d5ac0ea9906b element and the 6c04bd5ca3fcae76e30b72ad730ca86d element were also triggered at the same time. Therefore, it is necessary to limit the scope of events. When the 45a2772a6b6107b401db3c9b82c049c2 element is clicked, only the click event of the 45a2772a6b6107b401db3c9b82c049c2 element is triggered, but not the click events of the dc6dce4a544fdca2df29d5ac0ea9906b element and the 6c04bd5ca3fcae76e30b72ad730ca86d element: When the dc6dce4a544fdca2df29d5ac0ea9906b element is clicked, only Triggers the click event of the dc6dce4a544fdca2df29d5ac0ea9906b element, but not the 6c04bd5ca3fcae76e30b72ad730ca86d element.

Event Object

Since IE-DOM and standard DOM implement event objects in different ways, it becomes more difficult to obtain event objects in different browsers. To address this problem, JQuery has made the necessary extensions and encapsulations, making it easy to obtain the event object and some properties of the event object in any browser.

Using event objects in programs is very simple. You only need to add a parameter to the function. The jQuery code is as follows:

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

In this way, when the "element" element is clicked, the event object is created. This event object can only be accessed by event handling functions. After the event handling function is executed, the event object is destroyed.

Stop event bubbling

Stop event bubbling can prevent event handlers of other objects in the event from being executed. The stopPropagation() method is provided in JQuery to stop event bubbling.

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

When the 45a2772a6b6107b401db3c9b82c049c2 element is clicked, only the click event on the 45a2772a6b6107b401db3c9b82c049c2 element will be triggered, but not the click events of the dc6dce4a544fdca2df29d5ac0ea9906b element and the 6c04bd5ca3fcae76e30b72ad730ca86d element. The same method can be used to solve the bubbling problem on the dc6dce4a544fdca2df29d5ac0ea9906b element.

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

In this way, when the 45a2772a6b6107b401db3c9b82c049c2 element or dc6dce4a544fdca2df29d5ac0ea9906b element is clicked, only the corresponding content will be output, and no other content will be output.

Block default behavior

Elements in web pages have their own default behaviors. For example, clicking a hyperlink will jump, and clicking the "Submit" button will submit the form. Sometimes it is necessary to prevent the default behavior of elements.

In JQuery, the preventDefault() method is provided to prevent the default behavior of elements.

For example, in projects, it is often necessary to verify the form. When the "Submit" button is clicked, the form content is verified, such as whether an element is a required field, whether an element is 6 characters long, etc. When the form does not Prevent form submission when submission conditions are met (default behavior).

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

When the user name is empty and you click the "Submit" button, a prompt will appear and the form cannot be submitted. The form can only be submitted after entering the user name. It can be seen that the preventDefault() method can prevent the submission of the form.

If you want to stop bubbling and default behavior for the event object at the same time, you can return false in the event handling function. This is a shorthand way of calling both the stopPapagation() method and the preventDefault() method on the event object.

In the form example, event.preventDefault(); can be rewritten as: return false;

You can also rewrite event.stopPropaqation(); in the event bubbling example as: return false;

Event capture

Event capture and event bubbling are two opposite processes. Event capture is triggered from the top down. Still an example of a bubbling event, the click event of an element will be captured in the following order.

1. 6c04bd5ca3fcae76e30b72ad730ca86d
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 45a2772a6b6107b401db3c9b82c049c2

Obviously, event capture starts from the outermost element and then to the innermost element. Therefore, the bound click event will first be passed to the 6c04bd5ca3fcae76e30b72ad730ca86d element, then to the dc6dce4a544fdca2df29d5ac0ea9906b element, and finally to the 45a2772a6b6107b401db3c9b82c049c2 element.

Unfortunately, not all major browsers support event capturing, and this flaw cannot be fixed with JavaScript. JQuery does not support event capture. If readers need to use event capture, please use native JavaScript directly.

I hope this article will be helpful to everyone’s jQuery programming.