JS事件（一）事件流&事件处理程序

一、事件流描述的是从页面接收事件的顺序

IE和Netscape提出了几乎彻底相反的事件流概念

IE：事件冒泡（由内而外）

Netscape：事件捕获（由外向内）

DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

二、为事件指定处理程序的方式

2.一、HTML事件处理程序

<script>
    function fun(){
    alert('clicked');
}
</script>
<button onclick="func()">click me</button>

 缺点：一、时差  二、html代码语JavaScript代码耦合紧密，不易改动

2.二、DOM0级事件处理程序

获取要操做对象的引用

给对象的事件处理程序属性（如onclick）设置属性值为函数

以这种方式添加的事件会在事件流的冒泡阶段被处理

 

var btn=document.getElementById('btn');
btn.onclick=function(){
    alert(1);
}

 

删除DOM0级事件处理程序：

 

btn.onclick = null;

 

2.三、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.四、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;
            }
        }
        
    }