__ 一、事件冒泡和事件捕获__
- 事件冒泡
事件冒泡就是从HTML中具体的一个元素,沿着DOM树,向父级冒泡,直到document。
demo验证
<body>
<div class="one">one
<div class="two">two
<div class="three">three</div>
</div>
</div>
<script type="text/javascript">
var one=document.getElementsByClassName("one")[0];
var two=document.getElementsByClassName("two")[0];
var three=document.getElementsByClassName("three")[0];
var html=document.getElementsByTagName("html")[0];
var test=false;
one.addEventListener('click',function(){
console.log("one");
},test);
two.addEventListener('click',function(){
console.log("two");
},test);
three.addEventListener('click',function(){
console.log("three");
},test);
document.body.addEventListener('click',function(){
console.log("body");
},test);
html.addEventListener('click',function(){
console.log("html");
},test);
document.addEventListener('click',function(){
console.log("document");
},test);
</script>
</body>
点击three,控制台结果:
three
two
one
body
html
document
IE5.5及更早版本事件冒泡会跳过html元素,从body直接到document。
- 事件捕获
事件捕获是与事件冒泡相反的过程,沿着DOM树,事件最先触发最顶级的元素,依次向下到最底层的元素。
把代码中的test=true,再次点击three,控制台结果:
document
html
body
one
two
three
支持的浏览器:IE9,Safari,Chrome,OPera,FireFox
由于老版本浏览器不支持,因此很少使用事件捕获,书中也建议我们使用事件冒泡。
__ 二、事件处理程序 __
事件处理程序有三种
1、是在HTML中嵌入事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
添加事件:addEventListener(type,function,Boolean)
移除事件:removeEventListener(type,function,Boolean)
type:事件类型,function:事件执行的函数,Boolean:true事件捕获,false事件冒泡。
支持的浏览器:IE9、FireFox,Safari,Chrome,OPera
4、IE事件处理程序
添加事件:attachEvent(type,function)
移除事件:detachEvent(type,function)
IE8-只支持事件冒泡,通过此方法的事件都会添加到冒泡阶段。
三、事件对象
在触发DOM上的某个事件时,会产生一个事件对象event。
- DOM事件对象:
兼容的DOM会将一个event对象传入到事件处理程序中,无论指定事件处理成程序时使用什么方法(Dom0级、DOM2级),都会传入event对象。
属性/ 方法 | 类型 | 读/写 | 说明 |
---|---|---|---|
bubbles | Boolean | 只读 | 表明事件是否冒泡 |
cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
defaultPrevented | Boolean | 只读 | 为true表明已经调用了preventDefault()方法 |
detail | Integer | 只读 | 与事件相关的细节信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段,1捕获阶段,2处于目标阶段,3冒泡阶段 |
preventDefault() | Function | 只读 | 取消事件的默认行为,如果cancelable为true,则可以使用 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用 |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,如果bubbels为true,则可以使用这个方法 |
target | Element | 只读 | 事件的目标 |
trusted | Blooean | 只读 | 为true表示事件是浏览器生成的,为false表示事件是由开发人员通过js创建的 |
type | String | 只读 | 被触发的事件的类型 |
view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
- IE中的事件对象
在使用DOM0级方法添加事件处理程序时,event作为window对象的一个属性event=window.event
如果事件处理程序是使用attachEvent()添加的,那么就会有一个event作为参数传入事件处理程序函数中。
属性/ 方法 | 类型 | 读/写 | 说明 |
---|---|---|---|
cancelBubble | Blooean | 读/写 | 默认值为false,但将其设置为true就可以取消事件冒泡,与DOM中stopPropagation()的方法作用相同 |
returnvalue | Blooean | 读/写 | 默认值为true,但将其设置为fasle,就可以取消事件的默认行为,与DOM中的preventDefault()方法的作用相同 |
srcElement | Element | 只读 | 事件的目标,与DOM中的target属性相同 |
type | String | 只读 | 被触发的事件类型 |
四、跨浏览器的事件处理程序以及事件对象
/**
跨浏览器事件处理程序
*/
var EventUtil={
//事件处理程序
addHandler:function(element,typo,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//Dom2级事件监听
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);//IE事件处理程序
}else{
element["on"+type]=handler;//DOM0级事件处理程序
}
},
removeHandler:function(element,typo,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
//事件对象
getEvent:function(event){
return event ? event||window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
}
由于IE9以前不支持事件捕获,因此stopPropagation()只能用来阻止事件冒泡。
简要的笔记,先记到这里,后面再继续深入学习各种事件类型,加油!!!
网友评论