jQuery之事件冒泡

冒泡事件：
在页面上可以有多个事件，也可以多个事件响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时<body>元素上也绑定了click事件。

之所以称为冒泡是因为事件会按照DOM的层次结构像水泡一样不断的往上直到顶端，冒泡事件也会出现意料之外的效果，触发多余的事件，这时就需要用到事件对象了。

$('span').bind("click",function(){
   var txt=$('#msg').html()+"<p>内层span元素被单击</p>";
   $('msg').html(txt);
})

事件对象

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

})

当点击element元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁。

停止事件冒泡 stopPropagation来阻止事件冒泡

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

但点击<span>元素时，只会触发<span>元素山的click事件，而不会触发<div>元素和<body>元素的click事件

阻止默认行为 preventDefault()方法来阻止元素的默认行为

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

当用户名为空的时候，单击提交按钮会提示，并且表单不能提交，只有在用户名里输入内容后，才能提交表单，preventDefault方法能阻止表单的提交行为。

重点：
在表单的例子中，可以把 event.preventDerfault(); 阻止默认行为改写为 return false;

也可以把事件冒泡例子中的 event.stopPropagation(); 停止事件冒泡，改写为 return false;

事件捕获
事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最低端往下开始触发。jQuery不支持事件捕获，若需要使用事件捕获，直接使用原生的Javascript。

猜你喜欢