DOM2事件兼容处理

目录

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

1.DOM2级事件基础知识

使用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

2.DOM2兼容处理-this问题

由于在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);

所以在脚本中写法如下：

/*
 * 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;

    //首先判断该自定义属性之前是否存在，不存在就创建一个，由于要存储多个方法化妆后的结果，所以让其值是一个数组
    !curEle["myBind" + evenType] ? curEle["myBind" + evenType] = [] : curEle["myBind" + evenType].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;
        }
    }
}

示意图：

3.DOM2兼容处理-重复问题

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

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);

4.DOM2兼容处理-顺序问题

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

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

示意图：

完整代码如下：

/*
 * 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);
    }
}