一、事件流
假设有如下HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
其DOM树如下图所示:
如果点击div元素,因为div是该DOM树中层次最深的节点,那么哪个节点先接收事件?是由浅到深,还是由深到浅?
事件流描述的是从页面中接收事件的顺序。
存在两种事件流:事件冒泡(IE)和事件捕获(Netscape)(这两种事件流的事件传播顺序如下图所示)
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
- 事件捕获阶段:首先发生,为截获事件提供了机会
- 处于目标阶段:实际的目标接收到事件
- 事件冒泡阶段:在此阶段可以对事件做出响应
仍以上面的例子为例,单击div元素的事件触发顺序如下图所示:
二、事件处理程序
事件是用户或浏览器自身执行的某种动作(比如click、load、mouseover等)
事件处理程序(事件侦听器)是响应某个事件的函数。
事件处理程序的名字以“on”开头,如click事件的事件处理程序是onclick。
为事件指定处理程序的方式有以下几种:
(一)HTML事件处理程序
可以使用HTML为元素指定事件处理程序,方法是:为元素添加一个与事件处理程序同名的属性,该属性的值是能够执行的JS代码或JS函数。
//直接定义JS代码
<input type="button" value="点击" onclick="alert('clicked')" />
//调用在页面其他地方定义的JS函数
<input type="button" value="点击" onclick="showMessage()" />
以上代码为按钮添加了鼠标单击事件(click)的事件处理程序(onclick)。
注:这样定义的事件处理程序在执行时,有权访问全局作用域中的任何代码
(二)DOM0级事件处理程序
IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序
1、定义事件处理程序
- 使用JS代码来给事件指定事件处理程序,方法是:将一个函数赋值给一个事件处理程序属性。
- 每个元素都有自己的事件处理程序属性,这些属性的名字与事件处理程序的名字相同,如onclick。
var btn = document.getElementById("myBtn");
//为按钮指定onclick事件处理程序
btn.onclick = function(){
alert("Clicked");
}
注:
- 使用DOM0级方法指定的事件处理程序被认为是元素的方法(即事件处理程序是在元素的作用域中运行)
- 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
2、删除事件处理程序
将事件处理程序属性的值设置为null即可删除事件处理程序:
btn.onclick = null;
(三)DOM2级事件处理程序
1、定义事件处理程序
“DOM2级事件”定义了两个方法来处理事件处理程序:
-
addEventListener(要处理的事件名,事件处理程序函数,布尔值)
- 布尔值取值为false:在冒泡阶段调用事件处理程序
- 布尔值取值为true:在捕获阶段调用事件处理程序
- removeEventListener(要处理的事件名,事件处理程序函数,布尔值)
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
注:
- 大多数都是将事件处理程序添加到冒泡阶段,从而保证跨浏览器的兼容性,故通常都是将最后一个参数设为false
- 所有的DOM节点都包含上述两个方法
- DOM2级添加的事件处理程序也是在其依附的元素的作用域中运行的
- 使用DOM2级方法可以为同一个元素添加多个事件处理程序,这些事件处理程序会按照添加它们的顺序从上到下执行(DOM0级只能为同一个元素添加一个事件处理程序)
2、删除事件处理程序
通过addEventListener()添加的事件处理程序只能通过removeEventListener()删除,且删除时传入的参数必须与添加时传入的参数相同。
但是通过addEventListener()添加的匿名函数无法移除,最好是在其他地方定义事件处理程序的函数,然后将该函数的名称传给第二个参数。
var btn = document.getElementById("myBtn");
//定义事件处理程序函数
var handler = function(){
alert(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
(四)IE事件处理程序
支持IE事件处理程序的浏览器有IE和Opera
IE定义了两个与DOM2级类似的方法:
- attachEvent(事件处理程序名称,事件处理程序函数):通过方法添加的事件处理程序会被添加到冒泡阶段
- detachEvent(事件处理程序名称,事件处理程序函数)
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this.id);
});
注:
- 使用attachEvent()方法时,事件处理程序会在全局作用域中运行(与DOM方法不同)
- attachEvent()同样可以为同一个元素添加多个事件处理程序,但这些事件处理程序是以定义的相反方向执行的
- detachEvent()删除事件处理程序时,需传入与attachEvent()相同的参数,且无法删除匿名函数。
(五)跨浏览器的事件处理程序
为了保证跨浏览器的兼容性,我们定义一个EventUtil对象,它包含addHandler()和removeHandler()两个方法。
var EventUtil = {
//addHandler()方法
addHandler:function(element, type, handler){
//DOM2级事件处理程序
if(element.addEventListener){
element.addEventListener(type, handler, false);
}
//IE事件处理程序
else if(element.attachEvent){
element.attachEvent("on"+type, handler);
}
//默认使用DOM0级事件处理程序
else{
element["on"+type]=handler;
}
},
//removeHandler()方法
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent){
element.detachEvent("on"+type, handler);
}
else{
element["on"+type]=handler;
}
}
};
三、事件对象
触发DOM上的某个事件时,会产生一个event事件对象,该对象包含着所有与事件有关的信息。
所有浏览器都支持event对象,但支持的方式不同。
(一)DOM中的事件对象
1、event对象
兼容DOM(DOM0级和DOM2级)的浏览器将event对象传入到事件处理程序中。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);
2、event对象的属性和方法
event对象的属性和方法如下图所示:
在上图中,currentTarget的值始终等于this,而target只包含事件的实际目标。
-
如果直接将事件处理程序指定给了目标元素,则this === currentTarget === target
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.currentTarget === this); //true alert(event.target === this); //true } //上例中,点击事件的目标是按钮,并且把事件处理程序直接给了目标元素,所以三者的值相等
-
如果将事件处理程序没有直接指定给目标元素,this === currentTarget !== target
document.body.onclick = function(event){ alert(event.currentTarget === document.body); //true alert(this === document.body); //true alert(target === document.getElementById("myBtn")); //true } //上例中,点击世界的目标是按钮,但是事件处理程序制定给了body元素,故三者并不相等。
(二)IE中的事件对象
1、访问event对象
在IE中,指定事件处理程序的方法不同,访问event对象的方法也不同:
(1)使用DOM0级添加事件处理程序 —— event对象是window对象的一个属性
var btn = document.getElementById("myBtn");
btn.onclick = function(){
var event = window.event;
alert(event.type); //"click"
}
(2)使用attachEvent()添加事件处理程序 —— event对象会被传入事件处理程序函数中
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
alert(event.type); //"click"
});
(3)通过HTML特性指定事件处理程序 —— 通过event变量来访问event对象
<input type="button" vaule="Click me" onclick="alert(event.type)"/>
2、IE 中event对象的属性和方法
(三)跨浏览器的事件对象
虽然DOM和IE中的event对象不同,但基于它们之间的相似性,可以实现跨浏览器的兼容性
var EventUntil = {
//省略代码
addHandler: function(element, type, handler){},
//获取event对象
getEvent: function(event){
return event ? event : window.event;
},
//获取target
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;
}
},
//省略代码
removeHandler:function(element, type, handler){}
};