DOM事件总结（事件处理程序的类型及浏览器的兼容性）

Posted 2020-10-05

事件处理：

1、html事件处理程序

例子：

<input type="button" id="btn" value="click me" onclick="alert(‘Hello!‘);">

或者：

<input type="button" id="btn" value="click me" onclick="show()">
<script>
    function show(){
        alert("Hello world!");
    }
</script>

缺点：HTML与javascript代码紧密耦合在一起，不方便修改。

 

2、DOM零级处理程序

例子：

<input type="button" id="btn" value="click me">
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert("....");
    }
</script>

这段代码的作用是添加点击事件，若要取消点击事件，只需"btn.onclick=null;"即可。

 

3、DOM二级事件处理程序

　　定义了两个方法：addEventListener()和removeEventListener()，分别是用于指定和删除事件处理程序的操作。

　　两种方法都有三个参数：

　　（1）要处理的事件名；

　　（2）事件处理程序的函数；

　　（3）布尔值：true（在捕获事件中调用）；false（在冒泡事件中调用）。

例子：

var btn=document.getElementById("btn");
btn.addEventListener(‘click‘,function(){alert(‘Hello‘);},false);

要删除只能用removeEventListener()，而不能用“....=null”。

 

4、IE事件处理程序

　　attachEvent()和detachEvent()，分别是添加和删除事件。

　　两个参数：

　　（1）要处理的事件名；

　　（2）事件处理程序的函数。

　　不使用第三个参数的原因是：IE8以及更早的浏览器版本只支持事件冒泡。

　　用法：

btn.attachEvent(‘onclick‘,function(){.....});

注意是"onclick" "onmouseover" 还是用"click" "mouseover"等，有没有加"on"。

 

5、跨浏览器的事件处理程序

　　做法是：所有的事件处理程序封装在一个对象内。

　　如下代码：

/*
* @Author: 陈陈陈
* @Date:   2017-09-03 10:18:07
* @Last Modified by:   陈陈陈
* @Last Modified time: 2017-09-03 12:19:34
*/
var  eventUtil{

    /*添加事件处理程序    */
    addHandler:function(element,type,handler){//参数表元素、事件类型、函数
        if(element.addEventListener){//DOM 2级事件处理程序
            element.addEventListener(type,handler,false);//false表冒泡事件调用；true表捕获事件调用
        }else if(element.attachEvent){//IE事件处理程序
            element.attachEvent(‘on‘+type,handler);//没有第三个参数的原因是：IE8及更早的浏览器版本只支持事件冒泡
        }else{//DOM 0级事件处理程序
            element[‘on‘+type]=handler;
        }
    },

    /*删除事件处理程序    */
    removeHandler:function(element,type,handler){//删除事件处理程序，参数表元素、事件类型、函数
        if(element.removeEventListener){//DOM 2级事件处理程序
            element.removeEventListener(type,handler,false);//false表冒泡事件调用；true表捕获事件调用
        }else if(element.detachEvent){//IE事件处理程序
            element.detachEvent(‘on‘+type,handler);//没有第三个参数的原因是：IE8及更早的浏览器版本只支持事件冒泡
        }else{//DOM 0级事件处理程序
            element[‘on‘+type]=null;
        }
    },

    /*以下一些方法是关于事件对象的获取
      改善浏览器的兼容性，将DOM事件对象和IE事件对象合并在一起
      1、DOM的事件对象：
      (1)type:事件类型
      (2)target:事件目标
      (3)stopPropagation()方法:阻止事件冒泡
      (4)preventDefault()方法:阻止事件的默认行为

      2、IE中的事件对象：
      (1)type:事件类型
      (2)srcElement:事件目标
      (3)cancelBubble属性:阻止事件冒泡 true表示阻止冒泡，false表示不阻止
      (4)returnValue属性:阻止事件的默认行为
     */
    
    getEvent:function(event){
        return event?event:window.event;
    },

    getTarget:function(event){
        return target || srcElement;
    },

    stopPro:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },

    preventDef:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
}