【兼容性问题】JS中的事件绑定

本篇博客主要写addEventListener() (DOM2)和attachEvent()的兼容性问题

介绍一个知识点：DOM0级事件跟DOM2级事件

DOM0级事件绑定: 只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。

DOM2: 可以给某一个元素的同一个行为绑定多个不同的方法。

我们给wrap 用addEventListener()方法绑定了3个点击事件

测试！

控制台输出1,2,3

 

我们跑去老祖宗(IE)那里测试一下，IE11,10,9都是能正常输出。

结果到了IE8以下(包含IE8)却根本不支持addEventListener()方法。

其他浏览器正常支持addEventListener()方法。

---

那么为了在IE8以下能成功的绑定事件，我们用attachEvent()方法，注意：用该方法给元素加事件时我们得加on   。

我们一般在用addEventListener()方法   (DOM2)时，我们会先判断一下是否支持该方法，不支持的话我们就用attachEvent()方法，如下图红色区域。

你以为这样就完了吗？不，好戏还在后头。

测试！

你会发现控制台输出的是3,2,1      WT...？？？,逆序输出？？？

我们可以发现，attachEvent()方法在IE8老祖宗面前也摔了跟头(/doge)。

---

我们来看两个方法各自的this指向谁？？？

addEventListener()方法  输出：

结论：this 指向绑定addEventListener()方法的HTMLElement------->ID为wrap的 div  。

attachEvent()方法  输出：

结论：attachEvent()方法中的this 指向Window

 

如果我的文章可以帮到你的话，那我深感荣幸。