DOM2事件兼容处理

今天药忘吃喽~ 2022-06-06 12:18 216阅读 0赞

1.DOM2级事件基础知识  
2.DOM2兼容处理-this问题  
3.DOM2兼容处理-重复问题  
4.DOM2兼容处理-顺序问题

<table> 
 <tbody> 
  <tr> 
   <td><b>1.DOM2级事件基础知识</b></td> 
  </tr> 
 </tbody> 
</table>

使用DOM2级事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的  
DOM0级事件绑定只能给一个元素的某一个行为绑定一次方法，第二次会把前面的覆盖掉

box.onclick = function () { 
        console.log(1);
    };
    box.onclick = function () { 
        console.log(2);
    };

以上代码只能输出2

box.addEventListener("click",function (e) { 
        console.log(1);
    },false);
    box.addEventListener("click",function (e) { 
        console.log(2);
    },false);

可以输出1和2

DOM2的优势：  
可以给某一个元素的同一个行为绑定多个不同的方法；  
DOM0中的行为类型用DOM2一样可以使用，而且DOM2还提供了DOM0没有的一些行为，如DOMContentLoaded（当页面中的DOM结构/HTML结构加载完成触发的行为）

`window.onload=function () { };`  
当页面中的所有资源都加载完成（图片、HTML、音视频…）才会执行后面的函数，并且在一个页面中只能用一次，后面的会把前面的覆盖掉。因为它采用DOM0事件绑定，只能绑定一次。  
jQuery中：  
`$(document).ready(function () { });`  
`$(function () { });`  
只要当页面中的HTML结构加载完成就会执行对应的函数，并且在同一个页面中可以出现多次。采用的是DOM2事件绑定，并且绑定的行为是DOM2中新增加的DOMContentLoaded  
可以把window.onload换成DOM2级的写法：  
`window.addEventListener("load",function () { },false);`  
就可以多次执行

--------------------

给box绑定事件：

function fn1(e) { 
        console.log(this);
    }
    box.addEventListener("click", fn1, false);

移除绑定事件：  
`box.removeEventListener("click",fn1,false);`  
移除的时候需要保证单个参数：行为、方法、发生阶段，一点都不能差。在使用DOM2绑定的时候，一般都绑定实名函数

--------------------

只能给某个元素的同一个行为绑定多个”不同“的方法，如果方法相同只能留一个。如：

function fn1(e) { 
        console.log(1);
    }
    box.addEventListener("click", fn1, false);
    box.addEventListener("click", fn1, false);

结果只输出一个1

当行为触发，会按照绑定的先后顺序依次把绑定的方法执行

执行的方法中的this是当前被绑定的事件本身

--------------------

事件池：  
事件池是用来存储当前元素行为绑定方法的（浏览器自带的机制）

--------------------

在IE6-8浏览器中，不支持addEventListener，如果想实现DOM2级事件绑定，只能用attachEvent/detachEvent  
`box.attachEvent("onclick", fn1);`  
只有两个参数，不能像addEventListener那样控制在哪个阶段发生，默认只能在冒泡阶段发生，和DOM0类似。

和标准浏览器的事件池机制对比：  
1.顺序问题：执行的时候顺序是混乱的，标准浏览器是按照绑定顺序依次  
2.重复问题：可以给同一个元素的同一个行为绑定多个相同的方法  
3.this问题：IE6-8中当方法执行的时候， 方法中的this不是当前的元素而是window

<table> 
 <tbody> 
  <tr> 
   <td><b>2.DOM2兼容处理-this问题</b></td> 
  </tr> 
 </tbody> 
</table>

由于在IE6-8中attachEvent/detachEvent方法存在三个问题（见上），故编写一个event.js脚本来解决此问题。  
基本形式：

/*
     * bind：处理DOM2级事件绑定的兼容性问题（绑定方法）
     * @parameter：
     * curEle：要绑定的事件的元素
     * evenType：要绑定的事件类型（”click“、"mouseover"...）
     * evenFn：要绑定的方法
     */
    function bind(curEle, evenType, evenFn) {
        if (document.addEventListener) {
            curEle.addEventListener(evenType, evenFn, false);
            return;
        }
        curEle.attachEvent("on" + evenType, evenFn);
    }
    
    function unbind(curEle, evenType, evenFn) {
        if (document.removeEventListener) {
            curEle.removeEventListener(evenType, evenFn, false);
            return;
        }
        curEle.detachEvent("on" + evenType, evenFn);
    }

接下来解决this问题：

box.attachEvent("onclick", function () { 
        fn1.call(box);
    });

这样虽然解决了this的问题，但是又抛出了一个新问题，不知道该如何删除（不知道匿名函数是谁）  
解决方法如下：

var tempFn = function () { 
        fn1.call(box);
    };
    box.attachEvent("onclick", tempFn);
    box.detachEvent("onclick", tempFn);

所以在脚本中写法如下：

示意图：  
![这里写图片描述][SouthEast]

每一次在往自定义属性对应的容器添加前，看一下之前是否已经有了，有的话就不用重新添加了，同理也不需要往事件池中存储了

if (!curEle["myBind" + evenType]) {
        curEle["myBind" + evenType] = [];
    }
    var ary = curEle["myBind" + evenType];
    for (var i = 0; i < ary.length; i++) {
        var cur = ary[i];
        if (cur.photo === evenFn) {
            return;
        }
    }
    ary.push(tempFn);

解决顺序问题不用浏览器自带的事件池，而是自己模拟标准浏览器的事件池实现

原理：  
首先自己创建一个事件池（容器），把需要绑定的方法依次放入到容器中 —> 给当前元素绑定一个run方法，当点击的时候执行run方法，run方法中，先到刚才的容器中把绑定的方法得到，并且依次执行（需要传入当前元素MouseEvent）

示意图：  
![这里写图片描述][SouthEast 1]

完整代码如下：

/* * bind：处理DOM2级事件绑定的兼容性问题（绑定方法） * @parameter： * curEle：要绑定的事件的元素 * evenType：要绑定的事件类型（”click“、"mouseover"...） * evenFn： * 要绑定的方法 */
    function bind(curEle, evenType, evenFn) { 
        if (document.addEventListener) {
            curEle.addEventListener(evenType, evenFn, false);
            return;
        }
    
        //给evenFn化妆，并且把化妆前的照片贴在自己对应的脑门上
        var tempFn = function () { 
            evenFn.call(curEle);
        };
        tempFn.photo = evenFn;
    
        //首先判断该自定义属性之前是否存在，不存在就创建一个，由于要存储多个方法化妆后的结果，所以让其值是一个数组
        if (!curEle["myBind" + evenType]) {
            curEle["myBind" + evenType] = [];
        }
        //解决重复问题：每一次在往自定义属性对应的容器添加前，看一下之前是否已经有了，有的话就不用重新添加了，同理也不需要往事件池中存储了
        var ary = curEle["myBind" + evenType];
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            if (cur.photo === evenFn) {
                return;
            }
        }
        ary.push(tempFn);
    
        curEle.attachEvent("on" + evenType, tempFn);
    }
    
    function unbind(curEle, evenType, evenFn) { 
        if (document.removeEventListener) {
            curEle.removeEventListener(evenType, evenFn, false);
            return;
        }
        //拿ovenFn到curEle["myBind"]这里找化妆后的结果，找到之后在事件池中把化妆后的结果给移除事件池
        var ary = curEle["myBind" + evenType];
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            if (cur.photo === evenFn) {
                ary.splice(i, 1); //找到后首先把自己存储的容器中对应的去掉
                curEle.detachEvent("on" + evenType, cur); //把事件池中对应的移除掉
                break;
            }
        }
    }
    
    //解决顺序问题不用浏览器自带的事件池，而是自己模拟标准浏览器的事件池实现
    //on方法的作用是创建事件池，并且把需要给当前元素绑定的方法依次的增加到事件池中
    function on(curEle, evenType, evenFn) { 
        if (!curEle["myEvent" + evenType]) {
            curEle["myEvent" + evenType] = [];
        }
        var ary = curEle["myEvent" + evenType];
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            if (cur === evenFn) {
                return;
            }
        }
        ary.push(evenFn);
    
        //执行on的时候，给当前元素绑定了一个点击的行为，当点击的时候执行run方法，this是当前元素curEle，并且浏览器给run传递了一个MouseEvent事件对象
        //curEle.addEventListener(evenType, run, false);
        bind(curEle, evenType, run);
    }
    
    //off：在自己的事件池中把某一个方法移除
    function off(curEle, evenType, evenFn) { 
        var ary = curEle["myEvent" + evenType];
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            if (cur === evenFn) {
                ary.splice(i, 1);
                break;
            }
        }
    }
    
    //run:只给当前元素的点击行为绑定一个方法run，但点击的时候执行run方法，在run方法中根据自己存储的方法顺序分别再把这些方法执行
    function run(e) { 
        e = e || window.event;
        var flag = e.target ? true : false; //IE6-8不兼容
        if (!flag) {
            e.target = e.srcElement;
            e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
            e.pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
            e.preventDefault = function () { 
                e.returnValue = false;
            };
            e.stopPropagation = function () { 
                e.cancelBubble = true;
            }
        }
    
        //this是当前点击的这个元素curEle，e.target存储的是当前触发的元素curEle
        //获取自己事件池中绑定的那些方法，并且让这些方法依次执行
        var ary = this["myEvent" + e.type];
        for (var i = 0; i < ary.length; i++) {
            var tempFn = ary[i];
            tempFn.call(this, e);
        }
    }

[SouthEast]: /images/20220606/19118ca29b774a06b757c30829d1dfcc.png
[SouthEast 1]: /images/20220606/1b05743b109b4f2a9848e7955ed90318.png