《javascript高级程序设计》学习笔记（十）：也说事件

 

想学好javascript必须学会处理各种各样的事件(event)。
关于各种各样的事件以及浏览器的支持程度，可以在internet上查询官方文档。
这里只记录一些个人认为有必要说明的东西。

1.事件流（envent flow）,说白了就是一系列的事件响应。当你点击了页面上的一个按钮，会发生什么?实际上，是点击了该按钮、按钮的容器以及整个页面，每一个元素都按照特定顺序响应这个事件。按照事件的响应顺序，事件分为：冒泡型事件和捕获型事件.

(1).冒泡型事件。以IE为代表的解决方案。事件是按照DOM的层次结构由底端升至顶端。
事件的响应方式如下图（IE6中）：

(2).捕获型事件。以Netscape Navigator4.0为代表的解决方案。事件自顶向下。
事件的响应方式如下图：

2.DOM事件流
DOM标准，要求同时支持两种事件模型，顺序如下图。

注意：
<1>.DOM事件模型中，文本节点text也触发事件（IE不支持）。
<2>.在IE中，要阻止时间进一步冒泡，使用oEvent.cancelBubble = true;
  在mozilla中,使用 oEvent.stopPropagation()方法即可。

3.需要特别指明的是，IE和其他支持标准的浏览器对添加删除事件的不同处理。（为了支持IE我们总是需要再写一份代码......）

声明：以下内容是转自他人的blog，本文只是以学习为目的加以引用。
\\------------- start ----------------
attachEvent() / addEventListener() 为对象添加触发事件
有时候当某一对象的某一事件被触发时，它所要执行的程序可能是一大串，有可能是要呼叫某一函数，也有可能同时又要呼叫另一函数。

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行

在IE中使用attachEvent ,

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1

Mozilla系列中需要使用 addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3

看看gmail的代码

var Ka=navigator.userAgent.toLowerCase();
var rt=Ka.indexOf("opera")!=-1;
var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt);

function Zl(a,b,c){if(r){a.attachEvent("on"+b,c)}else

{a.addEventListener(b,c,false)}}
\\------------- end ----------------