《javascript高级程序设计》学习笔记(十):也说事件

时间:2022-05-07 09:55:19

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

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

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

《javascript高级程序设计》学习笔记(十):也说事件

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

《javascript高级程序设计》学习笔记(十):也说事件

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

《javascript高级程序设计》学习笔记(十):也说事件

注意:
<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 ----------------