1.事件冒泡:
假设一个html结构中两个标签存在父子层级关系,父盒子和子盒子都绑定同一个事件的方法;当点击子盒子时会执行两次方法,也就是将父盒子的事件方法也执行了,也就是由里向外依次执行,这就是所谓的事件冒泡(从里向外进行传播);摘自原作者的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<style>
.one{
width:400px;
height:100px;
border:1px solid #333;
}
.two{
height:35px;
line-height:35px;
padding-left:15px;
border:1px solid red;
}
.three{
padding:10px;
background-color: green;
border:1px solid #999;
cursor:pointer;
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$(".one").click(function(event) {
alert($(this).text());
});
$(".two").click(function(event) {
alert($(this).text());
});
$(".three").click(function(event) {
alert($(this).text());
});
});
</script>
</head>
<body>
<div class="one">
我是one(div)
<p class="two">
我是two(p)
<span class="three">我是three(span)</span>
</p>
</div>
</body>
</html>
当在span,p,div元素上个绑定一个click事件时,点击span元素时,会依次向上触发这三个事件,当然这不是想要的结果,所以就要进行阻止事件冒泡;
2.事件捕获:
事件捕获和事件冒泡正好相反,它会从外向里依次执行;
3.事件冒泡和事件捕获的切换:
使用addEventListener(事件监听)方法
element.addEventListener(event, function, useCapture)
它有三个参数,(事件类型,处理函数,boolean值(可选));
第三个参数默认值为false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数;
4.阻止事件冒泡:
(1)DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数调用;
(2)IE中提供的是cancelBubble属性,默认为false,当设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用;
(3)jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用event对象来调用就行,即event.stopPropagtion();
//封装阻止事件冒泡函数
function stopPropagation(event){
var event = window.event || event;
if(document.all){ //document.all:判断浏览器是否为IE
event.cancelBubble = true //IE浏览器
}else{
event.stoopPropagation(); //其他浏览器
}
}
5.默认行为:
即浏览器的一些默认行为,例如:点击超链接跳转,点击右键会弹出菜单,滑动滚轮控制滚动条等等;
6.阻止默认行为:
(1)DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在函数中调用;
(2)IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用;
(3)jQuery中提供了preventDefault()犯法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault();
(4)对于 a 链接,可以使用JavaScript伪协议来阻止默认行为,也就是:<a href="JavaScript:void(0)"></a>;
(5)还有一种简写写法,就是同时阻止事件冒泡和事件默认行为;就是直接返回一个false(return:false);
//封装阻止事件默认行为函数
function preventDefaultActiion(event){
var event = window.event || event;
if(document.all){
event.returnValue = false; //IE;浏览器
}else{
event.preventDefault(); //其他浏览器
}
}