首页 »Javascript教程 » javascript函数:JavaScript学习笔记（5）事件处理之事件流与事件处理函数分配 »正文
javascript函数:JavaScript学习笔记（5）事件处理之事件流与事件处理函数分配
来源: 发布时间:星期四, 2008年11月6日 浏览:155次 评论:0
如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:
DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：
<html _disibledevent= 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相反，他会按照事件处理函数的添加顺序执行。
相关文章
读者评论
发表评论
|
|
