JavaScript 事件模型

(1)W3C事件模型

W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。如果想创建一个捕捉事件，在支持W3C 事件模型的浏览器中，将addEventListener的第三个参数设为true就好了。例如： document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);

 

微软IE下没有addEventListener，但是也有自己的attachEvent，即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数（事件类型）需要加”on”，而addEventListener不用，另外 attachEvent因为不支持事件捕捉，所以也没有第三个参数。 attachEvent还有一个很要命的问题：重复绑定事件。 function sayHello(){ alert('Hello, world!'); }

Var $=document.getElementById; 这个地方使用有点类似于lua的东东，python中也有

// W3C Model

 $('div1').addEventListener('click', sayHello, false);

 $('div1').addEventListener('click', sayHello, false);

// Microsoft Model

$('div1').attachEvent('onclick', sayHello);

$('div1').attachEvent('onclick', sayHello);

在W3C模型中，相同事件处理函数的绑定会被忽略，也就是说第二个$('div1').addEventListener('click', sayHello, false);会被忽略。而在Microsoft模型中，第二个$('div1').attachEvent('onclick', sayHello);同样会被执行，所以，当你点击#div1的时候，alert框会弹出来两次。更有甚者，在detachEvent时候，也同样要 detachEvent两次才能彻底把sayHello从#div1的click事件中删除。

 

 

n (2)arguments 是进行函数调用时，除了指定的参数外，还另外创建的一个隐含对象。 arguments 是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一 样的访问性质及方式，可以由 arguments[n] 来访问对应的单个参数的值，并拥有 数组长度属性 length 。

n arguments 对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参 数列表，而且不能显式创建 arguments 对象。 arguments 对象只有函数开始时才 可用。

function ArgTest(arg1,arg2){

     alert(arguments.length);

     alert(arguments[1]);

}

ArgTest(11,’name’,‘a’);//arguments.length显示3  

                                 //arguments[1]显示name

alert(ArgTest.length);//显示2

 

n (2)callee与caller

• callee 是 arguments 的属性，指向函数本身，一般用在递归调用

function calleeLengthDemo(arg1, arg2){

    alert( arguments.length) ; // 实参

    alert( arguments.callee.length);//形参

}

calleeLengthDemo(‘a’); //分别显示1和2

• caller是函数的调用者的引用, caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null ,一般程序调试时，底层函数提供者查看调用者的源代码时用到

function A(){

     alert(A.caller==null||A.caller.toString());

}

function B(){

     A();

}

B();