JavaScript之事件处理程序

以下内容转载编辑自lijia_1983370657

js的事件处理程序有五种类型，分别是：

（1）HTML事件处理程序；

（2）DOM0级事件处理程序；

（3）DOM2级事件处理程序；

（4）IE事件处理程序；

（5）跨浏览器的事件处理程序；

---

下面我们来分别解释一下这五种事件处理程序

（1）HTML事件处理程序:事件直接写在DOM节点内部

<button onclick="say('hello')"></button>
 
<script>
    function say(msg) {
        alert(msg);
    }
</script>

（2）DOM0级事件处理程序:把一个函数赋值给一个事件的处理程序属性

<button id="btn"></button>
 
<script>
  var Btn = document.getElementById('btn');
  Btn.onclick = function() {
       alert('hello');
  }
</script>

在DOM0级事件处理程序上删除事件用下述方法：
Btn.onclick = null;

（3）DOM2级事件处理程序：可以给一个元素添加多个事件并绑定不同的事件方法

<button id="btn"></button>
<script>
// 将事件处理程序添加到事件的冒泡阶段，这样可以最大限度的兼容各大浏览器
    var Btn = document.getElementById('btn');
    Btn.addEventListener("click", function() {
        alert('hello');
    }, false);
 
    //通过addEventListener添加的事件，只能通过removeEventListener删除
    Btn.removeEventListener('click', function() {
        alert('hello');
    }, false);
 
</script>

（4）IE事件处理程序:IE有自己的一套事件处理程序，提供两个方法attachEvent()和detachEvent()；

<button id="btn"></button>
<script>
var Btn = document.getElementById('btn');
    Btn.attachEvent("onclick", function(){
        alert('hello');
    });
    Btn.detachEvent("onclick", function(){
        alert('hello');
    });
</script>

IE下的事件都是以冒泡的方式执行事件监听函数，所以attachEvent()和detachEvent()方法只有两个参数，不需要是否捕获的参数。值得注意的是，IE下的事件监听函数中的this指向的是window，而不是事件所在的元素。
（5）跨浏览器的事件处理程序：其实就是用条件语句，针对不同浏览器，写不同的处理程序

//跨浏览器事件处理程序
    var eventUtil={
        //添加句柄(element:元素，type:事件类型，handler:事件处理函数)
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{   //DOM0级事件处理程序的判断
                element['on'+type]=handler;
            }
        },
        //删除句柄(element:元素，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{   //DOM0级事件处理程序的判断
                element['on'+type]=null;
            }
        }