1、事件流描述的是从页面接收事件的顺序
IE和Netscape提出了几乎完全相反的事件流概念
IE:事件冒泡(由内而外)
Netscape:事件捕获(由外向内)
DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
2、为事件指定处理程序的方式
2.1、HTML事件处理程序
<script> function fun(){ alert('clicked'); } </script> <button onclick="func()">click me</button>
缺点:1、时差 2、html代码语JavaScript代码耦合紧密,不易改动
2.2、DOM0级事件处理程序
获取要操作对象的引用
给对象的事件处理程序属性(如onclick)设置属性值为函数
以这种方式添加的事件会在事件流的冒泡阶段被处理
var btn=document.getElementById('btn'); btn.onclick=function(){ alert(1); }
删除DOM0级事件处理程序:
btn.onclick = null;
2.3、DOM2级事件处理程序
var btn=document.getElementById("btn"); btn.addEventListener("click",function(){ alert("hello"); },false);
三个参数:事件、处理函数、事件处理阶段(true捕获false冒泡)
最大的优点:可以为一个对象添加多个事件,不会相互覆盖,而是按某种顺序依次执行
移除事件:
var btn=document.getElementById("btn"); function fun(){ alert("hello"); } btn.addEventListener("click",fun,false); btn.removeEvemtListener("click",fun,false);
注意:removeEventListener()不能移除匿名函数,像下面这样也是无效的:
var btn=document.getElementById("btn"); btn.addEventListener("click",function(){ alert("hello"); },false); btn.removeEventListener("click",function(){ alert("hello"); },false);
添加和移除的被认作两个不同的函数
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大程度兼容各种浏览器
2.4、IE事件处理程序
IE8-浏览器值支持事件冒泡
有两个类似的方法:attachEvent()和detachEvent()
var btn=document.getElementById("btn"); function fun(){ alert(this===window);//true } btn.attachEvent("click",fun); btn.detachEvent("click",fun);
总结:DOM2级和IE事件处理程序有何不同之处?
1.作用域:DOM2级事件处理与DOM0事件处理一样,作用域在当前元素(btn)的作用域中,IE事件处理程序的作用域是全局:window;
2.参数:个数不同,IE事件处理程序只支持冒泡;
3.是否有'on':DOM2无:'click',IE有:'onclick';
4.都支持添加多个事件,但执行顺序相反:DOM2按添加顺序,IE相反。
兼容浏览器的事件处理对象,以下:
var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); } else{ element['on'+type]=handler; } } removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); } else if(element.detachEvent){ element.detachEvent('on'+type,handler); } else{ element['on'+type]=null; } } }