JavaScript学习笔记（5）事件处理之事件流与事件处理函数分配

事件流解析

最新推荐文章于 2020-04-11 23:40:55 发布

最新推荐文章于 2020-04-11 23:40:55 发布 · 163 阅读

文章标签：

#JavaScript #IE #Firefox #HTML #ViewUI

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了JavaScript中的事件流机制，包括冒泡型与捕获型事件的区别，并通过实例演示了不同浏览器下事件触发的具体顺序。

如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:

DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。

事情到底是不是这样呢？观察下面的程序：

<html onclick=" clickHandle('html'); ">
  <head>
    <title>JAVASCRIPT事件流</title>
    <meta http-equiv="content-type" content="text/html; charset=GBK">
    <script type="text/javascript">
        function clickHandle(ele){
            alert(ele);
        }
    </script>
  </head>
  <body onclick=" clickHandle('body'); ">
    <div style="bgcolor:red" onclick=" clickHandle('div'); ">click me!</div>
  </body>
</html>

IE：点击 click me 运行顺序为：DIV-->BODY-->HTML 点击页面其他部分：BODY-->HTML
FF: 点击 click me 运行顺序为：DIV-->HTML-->BODY 点击页面其他部分：HTML-->BODY
呵呵，好像跟书上说的不太一样哦！程序的运行结果告诉我们：不管是在IE下还是在FireFox下，事件总是由最精确的元素（也就是DOM树中最深的节点）首先触发，然后才开始IE下的冒泡和FireFox下的捕获。

JavaScript为我们提供了三种事件处理函数的分配方式，第一种就像上面的程序一样，是在HTML代码中分配事件处理函数。
第二种方法是在JavaScript中分配事件处理函数，这种方法首先必须得获得要分配事件处理函数的元素的引用，参考以下程序：

1         window.onload = function(){
2             var oDiv = document.getElementById("contentDiv");
3             oDiv.onclick = function(){
4                 alert(oDiv.innerHTML);
5             }
6         }

就像上面提到的，该方法在分配事件处理函数时必须保证已经获得对该元素的引用，所以这个程序才把oDiv的onclick事件放在了onload事件的内部，否则会报oDiv未被定义。还有一个需要注意的地方是使用这种事件处理函数的分配方式时只能为某个特定的事件分配一个函数且事件函数的签名必须小写，否则前面分配的函数会被后面的函数所覆盖，如果想为同一个事件分配两个以上的处理函数，需要采用第三种事件处理函数分配方式。
在IE中我们使用obj.attachEvent()方法为某个元素分配函数，使用obj.detachEvent()方法为某个元素分离事件处理函数，而在DOM（以FireFox为例）中我们使用addEventListener()方法分配函数，使用removeEventListener()方法分离函数。
参考一下代码：

1         window.onload = function(){
2             var oDiv = document.getElementById("contentDiv");
3             var func1 =  function(){
4                 alert(oDiv.innerHTML);
5             }
6             var func2 = function(){
7                 alert("also " + oDiv.innerHTML);
8             }
9             //IE
10             if(oDiv.attachEvent){
11                 oDiv.attachEvent("onclick",func1);
12                 oDiv.attachEvent("onclick",func2);
13                 //oDiv.detachEvent("onclick",func1);
14             } else if(oDiv.addEventListener){
15                 //FireFox
16                 oDiv.addEventListener("click",func1,true);
17                 oDiv.addEventListener("click",func2,true);
18                 //oDiv.removeEventListener("click",func1,true);
19             }
20
21         }

我们来说明一下IE下与FireFox下这种事件处理函数的不同点：
1、在函数的第一个参数中，IE下必须有"on"做为前缀，而FF下不用，两种情况下处理函数签名必须小写。
2、FireFox下的addEventListener()函数的第三个参数表示的是：true表示在捕获阶段增加事件处理函数，false表示在冒泡阶段增加事件处理函数，但是由于FireFox不支持冒泡事件流，所以这里我们设成True或者Flase好像没什么区别。但是要注意的一点就是，如果在 addEventListener()中第三个参数设为true,那么在removeEventListener()方法中的第三个参数一定也要设为相同的值，否则方法失效。
3、在运行时阶段，IE首先执行的是最后边一个被增加的事件处理函数然后才是倒数第二个以此类推，但是在FireFox下与IE相反，他会按照事件处理函数的添加顺序执行。