Event
在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)
所有浏览器都支持Event对象,但支持方式不同
IE中的事件对象:window.event
/*
封装Event对象
IE:window.event
*/
functiongetEvent(event){
returnevent?event:window.event;
}
事件冒泡
什么是事件冒泡
即事件开始时由最具体的元素(文档中嵌套最深的那个元素)接收,然后逐级向上传播到较不为具体的节点
所有浏览器都支持事件冒泡
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,Chrome=1">
<title>事件冒泡</title>
<metaname="description"content="">
<metaname="keyWords"content="">
<linkhref=""rel="stylesheet">
<style>
.one{
width:400px;
height:100px;
border:1pxsolid#333;
}
.two{
height:35px;
line-height:35px;
padding-left:15px;
border:1pxsolidred;
}
.three{
padding:10px;
background-color:green;
border:1pxsolid#999;
cursor:pointer;
}
</style>
<scriptsrc="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>
<divclass="one">
我是one(div)
<pclass="two">
我是two(p)
<spanclass="three">我是three(span)</span>
</p>
</div>
</body>
</html>
当在span、p、div元素上各绑定一个click事件,当单击span元素时,会依次触发三个事件,即span、p、div元素上的click事件,这就是事件冒泡,按照DOM层次结构像水泡一样不断向上直至顶端
阻止事件冒泡
DOM中提供stopPRopagation()方法,但IE不支持,使用event对象在事件函数中调用就行
IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用
/*
封装事件冒泡函数:
document.all:判断浏览器是否是IE
IE:cancelBubble
Firefox:stopPropagation
*/
functionstopPropagation(e){
vare=window.event||e;
if(document.all){
e.cancelBubble=true;
}else{
e.stopPropagation();
}
}
jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();
默认行为
什么是默认行为
网页元素,都有自己的默认行为,例如,单击超链接会跳转...
阻止默认行为
DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行
IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用
复制代码
/*
封装阻止元素的默认行为函数
IE:returnValue
DOM:preventDefault
*/
functionpreventDefaultAction(event){
varevent=window.event||event;
if(document.all){
//支持IE
event.returnValue=false;
}else{
//IE不支持
event.preventDefault();
}
}
复制代码jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式
新闻热点
疑难解答