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 theelement will "bubble" in the following order.
1. 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 element, but the click events of the 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: 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. When the element is clicked, only the click event on the element will be triggered, but not the click events of the In this way, when the element or 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). 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. 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 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.
2.
3.
$("element").bind("click",function(event){
//event : 事件对象
//...
});
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "内层span元素被点击";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
})
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
<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(); //阻止默认行为 ( 表单提交 )
}
})
})
2.
3.