《重拾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);
}