冒泡事件:
在页面上可以有多个事件,也可以多个事件响应同一个事件,假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了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。