JavaScript中的事件
javascript中的事件
javascript与html之间的交互是通过事件实现的。
事件，就是文档或窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。
事件流：
事件流描述的是从页面中接收事件的顺序。ie的事件流是事件冒泡流；而netscape的事件流是事件捕获流。
? 事件冒泡：
ie的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
以下面的html页面为例：
<!doctype html>
<html>
<head>
<title>eventbubbling</title>
</head>
<body>
<pid="mydiv">click me</p>
</body>
</html>
如果单击了页面中的<p>元素，那么这个click事件会按照如下顺序传播：
（1）<p>
（2）<body>
（3）<html>
（4）document
也就是说，click事件沿dom树向上传播，在每一级节点上都会发生，直至传播到document对象。事件冒泡的过程如下：
所有现代浏览器都支持事件冒泡，但是在具体实现上还是有一些差别：ie5.5及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到document）。ie9、firefox、chrome和safari则将事件一直冒泡到window对象。
? 事件捕获：
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
仍然以前面的html页面作为演示事件捕获的例子，单击<p>元素就会以下列顺序触发click事件：
（1）document
（2）<html>
（3）<body>
（4）<p>
在事件捕获过程中，document对象首先接收到click事件，然后事件沿dom树依次向下，一直传播到事件的实际目标，即<p>元素。事件捕获的过程如下：
? dom事件流：
“dom2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。
以前面的html页面为例，单击<p>元素会按照下面的顺序触发事件：
多数支持dom事件流的浏览器都实现了一种特定的行为：“dom2级事件”规范明确要求捕获阶段不会涉及事件目标。
事件处理程序：
事件就是用户或浏览器自身执行的某种动作，诸如click、load和mou/" target="_blank">seover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。
? html事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的html特性来指定。这个特性的值应该是能够执行的javascript代码。
例如要在按钮被单击时执行一些javascript：
<input type=”button” value=”click me”onclick=”alert(‘clicked’)”/>
单击这个按钮时，就会显示一个警告框。
这个操作是通过指定onclick特性并将一些javascript代码作为它的值来定义的。由于这个值是javascript，因此不能在其中使用未经转义的html语法字符，例如和号&、双引号“”、小于号<或大于号>。为了避免使用html实体，这里在标红处使用了单引号。如果想使用双引号，那么就需要对其进行转义：
<input type=”button” value=”click me”onclick=”alert("clicked")”/>
在html中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本：
<script type=”text/javascript”>
functionshowmessage(){
alert(“hello world”);
}
</script>
<input type=”button” value=”click me”onclick=”showmessage()”/>
在这里，单击按钮就会调用showmessage()函数。这个函数是在一个独立的<script>元素中定义的，当然也可以被包含在一个外部文件中。
事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。
可以通过event变量访问事件对象：
<inputtype=”button” value=”click me” onclick=” alert(event.type)”/>
输出：click
说明通过event变量，可以直接访问事件对象，不用自己定义它，也不用从函数的参数列表中读取。
<inputtype=”button” value=”click me” onclick=” alert(this.value)”/>
输出：click me
this值等于事件的目标元素。
不过在html中指定事件处理程序有两个缺点。首先，存在一个时差问题，因为用户可能会在html元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。假设前面例子中的showmessage()函数是在按钮下方、页面最底部定义的，如果用户在页面解析showmessage()函数之前就单击了按钮，就会引发错误。解决方法是将html事件处理程序封装在一个try-catch块中：
<input type=”button” value=”click me”onclick=”try{showmessage();}catch(ex){}”/>
通过html指定事件处理程序的最后一个缺点是html与javascript代码紧密耦合，如果要更换事件处理程序，就要改动两个地方：html代码和javascript代码。
? dom0级事件处理程序
通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序：
varbtn=document.getelementbyid(“mybtn”);
btn.onclick=function(){
alert(“clicked”);
};
但要注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。
使用dom0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行，也就是说程序中的this引用当前元素：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(){
alert(“this.id”);//“mybtn”
};
不仅仅是id，可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除通过dom0级方法指定的事件处理程序，需要将事件处理程序属性的值设置为null：
btn.onclick=null; //删除事件处理程序
此后再单击按钮将不会有任何动作发生。
dom0级对每个事件只支持一个事件处理程序。
? dom2级事件处理程序
“dom2级事件”定义了两个方法，用于处理和删除指定的事件处理程序：addeventlistener()和removeeventlistener()。所有dom节点中都包含这两个方法，它们都接受3个参数：要处理的事件名（不用在前面加on）、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序：
varbtn=document.getelementbyid(“mybtn”);
btn.addeventlistener(“click”,function(){
alert(this.id);
},false);
上面的代码为一个按钮添加了onclick事件处理程序，而且该事件会在冒泡阶段被触发。
使用dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序：
var btn=document.getelementbyid(“mybtn”);
btn.addeventlistener(“click”,function(){
alert(this.id);
},false);
btn.addeventlistener(“click”,function(){
alert(“hello world!”);
},false);
为按钮添加的两个事件处理程序会按照添加它们的顺序触发。
通过addeventlistener()添加的事件处理程序只能使用removeeventlistener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。
这意味着通过addeventlistener()添加的匿名函数将无法移除。以下代码的移除操作是无效的，因为removeeventlistener()中的第二个参数与传入addeventlistener()中的那一个是完全不同的函数：
var btn=document.getelementbyid(“mybtn”);
btn.addeventlistener(“click”,function(){
alert(this.id);
},false);
btn.removeeventlistener(“click”,function(){
alert(this.id);
},false);
正确的方式是这样的：
var btn=document.getelementbyid(“mybtn”);
var handler=function(){
alert(this.id);
};
btn.addeventlistener(“click”,handler,false);
btn.removeeventlistener(“click”,handler,false);
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。（最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。）
? ie事件处理程序
ie实现的是attachevent()和detachevent()方法，这两个方法接受相同的两个参数：事件处理程序名称（前缀是on）和事件处理程序函数。（由于ie8及更早版本只支持事件冒泡，所以通过attachevent()添加的事件处理程序都会被添加到冒泡阶段。）
var btn=document.getelementbyid(“mybtn”);
btn.attachevent(“onclick”,function(){
alert(“clicked”);
});
注意，这里attachevent()的第一个参数是“onclick”，而非dom的addeventlistener()方法中的“click”。
在ie中使用attachevent()与使用dom0级方法的主要区别在于事件处理程序的作用域。在使用dom0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachevent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window：
var btn=document.getelementbyid(“mybtn”);
btn.attachevent(“onclick”,function(){
alert(this===window);//true
});
与addeventlistener()类似，attachevent()方法也可以用来为一个元素添加多个事件处理程序：
var btn=document.getelementbyid(“mybtn”);
btn.attachevent(“onclick”,function(){
alert(“clicked”);
});
btn.attachevent(“onclick”,function(){
alert(“hello world!”);
});
与dom方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。
使用attachevent()添加的事件可以通过detachevent()来移除，条件是必须提供相同的参数。与dom方法一样，添加匿名函数将不能被移除，不过，只要能够将对相同函数的引用传给detachevent()，就可以移除相应的事件处理程序：
var btn=document.getelementbyid(“mybtn”);
var handler=function(){
alert(“clicked”);
};
btn.attachevent(“onclick”,handler);
btn.detachevent(“onclick”,handler);
? 跨浏览器的事件处理程序
要保证处理事件的代码能在大多数浏览器下一致的运行，只需关注冒泡阶段。
在eventutil对象下创建方法addhandler()和removehandler()方法，addhandler()的职责是视情况分别使用dom0级方法，dom2级方法或ie方法来添加事件。addhandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。removehandler()方法也接受相同的参数，这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用dom0级方法：
var eventutil={
addhandler:function(element,type,handler){
if(element.addeventlistener){
element.addeventlistener(type,handler,false);
}elseif(element.attachevent){
element.attachevent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removehandler:function(element,type,handler){
if(element.removeeventlistener){
element.removeeventlistener(type,handler,false);
}elseif(element.detachevent){
element.detachevent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
};
这两个方法首先都会检测传入的元素中是否存在dom2级方法，如果存在dom2级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数false（表示冒泡阶段）。如果存在的是ie的方法，则采取第二种方案，注意，为了在ie8及更早版本中运行，此时的事件类型必须加上“on”前缀。最后一种可能就是使用dom0级方法（在现代浏览器中，应该不会执行这里的代码）。此时，我们使用的是方括号语法来将属性名指定为事件处理程序，或者将属性设置为null。
这样来使用eventutil对象：
var btn=document.getelementbyid("mybtn");
var handler=function(){
alert("clicked");
};
eventutil.addhandler(btn,"click",handler);
eventutil.removehandler(btn,"click",handler);
事件对象
在触发dom上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。
? dom中的事件对象
兼容dom的浏览器会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用什么方法（dom0级或dom2级），都会传入event对象：
varbtn=document.getelementbyid(“mybtn”);
btn.onclick=function(event){
alert(event.type); //click
};
btn.addeventlistener(“click”,function(event){
alert(event.type); //click
},false);
这里的两个事件处理程序都会弹出一个警告框，显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型，例如“click”。
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员：
在事件处理程序内部，对象this始终等于currenttarget的值，而target则只包含事件的实际目标。
如果直接将事件处理程序指定给了目标元素，则this、currenttarget和target包含相同的值（事件处理程序函数恰好注册到真正触发事件的元素上时）：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(event){
alert(event.currenttarget===this); //true
alert(event.target===this);//true
};
如果事件处理程序存在于按钮的父节点中（例如document.body）：
document.body.onclick=function(event){
alert(event.currenttarget===document.body); //true
alert(this ===document.body);//true
alert(event.target===document.getelementbyid(“mybtn”));//true
};
当单击上面这里的按钮时，this和currenttarget都等于document.body，因为事件处理程序是注册到这个元素上的。然而target元素却等于按钮元素，因为它是click事件真正的目标，由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才得到了处理。（事件处理程序注册到哪个元素上，真正触发事件的元素，这两个不一定是同一个元素。）
在需要通过一个函数处理多个事件时，可以使用type属性：
var btn=document.getelementbyid(“mybtn”);
var handler=function(event){
switch(event.type){
case "click":
alert("clicked");
break;
case"mouseover":
event.target.style.backgroundcolor="red";
break;
case "mouseout":
event.target.style.backgroundcolor="";
break;
}
};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
这里通过检测event.type属性，让函数能够确定发生了什么事件，并执行相应的操作。
要阻止特定事件的默认行为，可以使用preventdefault()方法。例如，链接的默认行为是在被单击时会导航到其href特性指定的url。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它：
var link=document.getelementbyid(“mylink”);
link.onclick=function(event){
event.preventdefault();
};
（只有cancelable属性设置为true的事件，才可以使用preventdefault()来取消其默认行为。）
stoppropagation()方法用于立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。
例如，直接添加到按钮上的事件处理程序可以调用stoppropagation()，从而避免触发注册在document.body上的事件处理程序：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(event){
alert("clicked");
event.stoppropagation();
};
document.body.onclick=function(event){
alert("bodyclicked");
};
对于这个例子而言，如果不调用stoppropagation()，就会在单击按钮时出现两个警告框。但是由于调用stoppropagation()导致click事件不会传播到document.body，因此就不会触发注册在document.body上的onclick事件处理程序。
事件对象的eventphase属性，可以用来确定事件当前正位于事件流的哪个阶段：如果是在捕获阶段调用的事件处理程序，那么eventphase等于1；如果事件处理程序处于目标对象上，则eventphase等于2；如果是在冒泡阶段调用的事件处理程序，eventphase等于3。（这里要注意的是，尽管“处于目标”发生在冒泡阶段，但eventphase仍然等于2。）
来看一个例子：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(event){
alert(event.eventphase);//2
};
document.body.addeventlistener("click",function(event){
alert(event.eventphase);//1，addeventlistener函数的第三个参数设置为true表示在捕获阶段调用事件处理函数。
},true);
document.body.onclick=function(event){
alert(event.eventphase);//3，在btn按钮被点击后，事件向上冒泡才会触发body的click事件，所以对body来说触发click事件的是冒泡阶段。
};
当单击这个例子中的按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到document.body中的那一个，结果会弹出一个警告框显示表示eventphase的1。然后会触发在按钮上注册的事件处理程序，此时的eventphase值为2。最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到document.body中的那一个，显示eventphase的值为3。（当eventphase等于2时，this、target和currenttarget始终都是相等的。）（只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。）
? ie中的事件对象
与访问dom中的event对象不同，要访问ie中的event对象有几种不同的方式，取决于指定事件处理程序的方法。
在使用dom0级方法添加事件处理程序时，event对象作为window对象的一个属性存在：
varbtn=document.getelementbyid(“mybtn”);
btn.onclick=function(){
varevent=window.event;
alert(event.type);//"click"
};
如果事件处理程序是使用attachevent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中：
varbtn=document.getelementbyid(“mybtn”);
btn.attachevent("onclick",function(event){
alert(event.type);//"click"
});
如果是通过html特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问event对象：
<input type=”button” value=”click me”onclick=”alert(event.type)”>
ie的event对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的dom属性和方法。与dom的event对象一样，这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含下表所列的属性和方法：
因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。可以使用event.srcelement检测：
var btn=document.getelementbyid(“mybtn”);
btn.attachevent("onclick",function(event){
alert(event.type);//"click"
});
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(){
alert(window.event.srcelement===this);//true
};
btn.attachevent("onclick",function(event){
alert(event.srcelement===this);//true
});
returnvalue属性（相当于dom中的preventdefault()方法）的作用是取消给定事件的默认行为。只要将returnvalue设置为false就可以阻止默认行为：
var link=document.getelementbyid(“mylink”);
link.onclick=function(){
window.event.returnvalue=false;
};
与dom不同的是，在此没有办法确定事件是否能被取消。
cancelbubble属性（相当于dom中的stoppropagation()方法）是用来停止事件冒泡的。由于ie不支持事件捕获，因而只能取消事件冒泡：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(){
alert("clicked");
window.event.cancelbubble=true;
};
document.body.onclick=function(){
alert("bodyclicked");
};
通过在onclick事件处理程序中将cancelbubble设置为true，就可以阻止事件通过冒泡而触发document.body中注册的事件处理程序。在单击按钮之后只会显示一个警告框。
? 跨浏览器的事件对象
对前面的eventutil对象（灰色部分）加以增强，添加以下方法：
var eventutil={
addhandler:function(element,type,handler){
if(element.addeventlistener){
element.addeventlistener(type,handler,false);
}elseif(element.attachevent){
element.attachevent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removehandler:function(element,type,handler){
if(element.removeeventlistener){
element.removeeventlistener(type,handler,false);
}elseif(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;
}
}
};
上面的代码为eventutil添加了四个新方法：
第一个是getevent()，它返回对event对象的引用。在使用这个方法时，必须假设有一个事件对象传入到事件处理程序中，而且要把该变量传给这个方法：
btn.onclick=function(event){
event=eventutil.getevent(event);
};
第二个方法是gettarget()，它返回事件的目标。可以像下面这样使用这个方法：
btn.onclick=function(event){
event=eventutil.getevent(event);
vartarget=eventutil.gettarget(event);
};
第三个方法是preventdefault()，用于取消事件的默认行为。下面是使用这个方法的例子：
var link=document.getelementbyid(“mylink”);
link.onclick=function(event){
event=eventutil.getevent(event);
eventutil.preventdefault(event);
};
第四个方法是stoppropagation()，用于阻止事件冒泡（因为ie不支持事件捕获，所以在跨浏览器的情况下这个方法也只能用来阻止事件冒泡）。下面是一个例子：
var btn=document.getelementbyid(“mybtn”);
btn.onclick=function(event){
alert("clicked");
event=eventutil.getevent(event);
eventutil.stoppropagation(event);
};
document.body.onclick=function(event){
alert("body clicked");
};
上一篇： React router的Route应用
下一篇： python中关于日期时间处理的问答集锦