Javascript中事件机制详解

太过爱你忘了你带给我的痛 2022-06-14 05:21 242阅读 0赞

## 事件流 ##

***事件流***描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。  
JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。  
**事件冒泡**  
IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较不具体的节点：

如果单击了id为inner的元素，那么这个click事件会按照如下顺序传播：

(1)#inner
    (2)#outer
    (3)body
    (4)html
    (5)document

也就是说click事件先在我们单击的元素上发生，然后click事件沿DOM树向上传播，在第一级节点上都会发生，直到传播到document对象。  
所有现代浏览器都支持事件冒泡，但是在具体实现上还是有细微的差别，IE5.5及更早的版本中的事件冒泡会跳过元素（从直接跳到document）,IE9、Firefox、Chrome和Safari则一直将事件冒泡到window对象。  
**事件捕获**  
事件捕获的思想是不太具体的事件应该更早收到事件，而最具体的事件应该最后接收到事件。事件捕获的用意在于事件达到预定目标之前捕获它。

同样的例子，现在单击id为inner的元素那么这个click事件会按照如下顺序传播：

(1)document
    (2)html
    (3)body
    (4)#outer
    (5)#inner

在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标。  
现在IE9、Firefox、Chrome、Opera和Safari也都支持这种事件流模型，尽管“DOM2级事件”规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件。  
**DOM事件流**  
”DOM2级事件“规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。还是以上面的代码为例，单击inner则会按照下面的顺序触发事件：

(1)document
    (2)body
    (3)#outer
    (4)#inner
    (5)#outer
    (6)body
    (7)html
    (8)document

在DOM事件流中，实际的目标inner在捕获阶段不会接受到事件。这意味着在捕获阶段，事件到outer就停止了，下一个阶段是“处于目标”阶段，于是事件在inner 上发生，并在事件处理中呗看成是冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

## 事件处理程序 ##

响应某个事件的函数叫做事件处理程序（事件侦听器）。  
事件处理程序的名字以”on”开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。  
为事件指定事件处理程序的方法主要有3种。  
**一、html事件处理程序**  
事件直接加在html元素上。  
这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合，修改时即要修改html也要修改js。  
这种方式也有两种方法：  
*第一种*：直接在html中定义事件处理程序及包含的动作。

*第二种*：html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。

<input type="button" value="click me!" onclick="showMessage()"/>
    <script> function showMessage(){ alert("clicked!"); } </script>

**二、DOM0级事件处理程序**  
把一个函数赋值给一个事件处理程序属性。  
这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数。因为这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的。

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); myBtn.onclick=function(){ alert("clicked!"); } </script>

删除事件处理程序：

myBtn.onclick=null;

**三、DOM2级事件处理程序**  
DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。所有的DOM节点都包含这2个方法。  
这两个方法都需要3个参数：事件名，事件处理函数，布尔值。  
这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。  
添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); myBtn.addEventListener("click",function(){ alert("hello"); },false); myBtn.addEventListener("click",function(){ alert("world"); },false); </script>

删除事件处理程序：通过addEventListener添加的事件处理程序必须通过removeEventListener删除，且参数一致。通过addEventListener添加的匿名函数将无法删除。下面这段代码将不起作用！

myBtn.removeEventListener("click",function(){ 
            alert("world");
        },false);

应该这样写：

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); var handler=function(){ alert("hello"); } myBtn.addEventListener("click",handler,false); myBtn.removeEventListener("click",handler,false); </script>

**四、IE事件处理程序**  
IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。  
这两个方法都需要两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。注意是事件处理程序名称而不是事件名称，所以要加上on，是onclick而不是click。

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); var handlerIE=function(){ alert("helloIE"); } var handlerDOM= function () { alert("helloDOM"); } myBtn.addEventListener("click",handlerDOM,false); myBtn.attachEvent("onclick",handlerIE); </script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

\*\*注意：\*\*IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。  
IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。  
*删除事件处理程序*:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。和DOM事件一样，添加的匿名函数将无法删除。所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); var handler= function () { alert("hello"); } myBtn.attachEvent("onclick",handler); myBtn.detachEvent("onclick",handler); </script>

**注意：** IE事件处理程序中还有一个地方需要注意：作用域。  
使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

<input id="myBtn" type="button" value="click me!"/>
    <script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert(this===window); //true }); </script>

## 跨浏览器的事件处理程序 ##

所以为了兼容IE浏览器和标准的浏览器，我们需要编写通用的方法来处理：

## 事件对象 ##

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。  
**跨浏览器的事件对象**