重拾javascript--事件模型

《重拾javascript–事件模型》

1.概念

什么是事件？

  <button id="save" onclick="save()" />

  function save(){
    //dothings
  }

上面的onclick就是一种简单的事件(点击事件)

2.分类

1.原始事件模型(DOM0模型)

例如html代码的中的
html
<input type=”button” onclick=”func1()” />

例如js代码中的
javascript
document.getElementsByTagName('input')[0].onclick = func1();

分析：
相同的事件监听只能绑定一个a.οnclick= func1(); a.onclikc=func2();
那么只会执行func2()中的内容

2.IE事件

　在参考其他资料时，我有看到这样的一句话“IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性”，为求证其真伪，我用IE8执行了代码alert(window.event)，结果弹出是null，说明该属性已经定义，只是值为null（与undefined不同）。我想难道这个全局对象的属性是在监听函数里才加的？于是执行下面代码：

　　window.onload = function (){alert(window.event);}

　　setTimeout(function(){alert(window.event);},2000);

　 结果第一次弹出
【object event】，两秒后弹出依然是null。由此可见IE是将event
对象在处理函数中设为window的属性，一旦函数执行结束，便被置为null了。IE的事件模型只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。冒泡机制后面系列会讲，此处暂记。IE模型下的事件监听方式也挺独特，绑定监听函数的方法是：attachEvent( “eventType”,”handler”)，其中evetType为事件的类型，如onclick，注意要加’on’。解除事件监听器的方法是 detachEvent(“eventType”,”handler” )

IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以这样写。

3.DOM2事件

此模型是W3C制定的标准模型，既然是标准，那大家都得按这个来，我们现在使用的现代浏览器（指IE6~8除外的浏览器）都已经遵循这个规范。W3C制定的事件模型中，一次事件的发生包含三个过程：

　 (1)capturing phase:事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。

　　(2)target phase:事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.

　　(3)bubbling phase:事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

4.总结

如何来写一个比较好的事件呢?
javascript
var a = document.getElementById('a');
if(a.attachEvent){
a.attachEvent('onclick',func);
}else{
a.addEventListener('click',func,false);
}