深入分析IE事件模型

IE事件模型

绑定事件

target.attachEvent('onclick',fn);

事件解绑

target.attachEvent('onclick',fn);

target：表示目标元素
attachEvent中

• 第一个参数接收事件名称，需要on前缀
• 第二个参数回调函数，事件触发时执行
  解绑时需要传入绑定时绑定的函数才能正确解绑

IE事件模型与标准事件模型的区别

事件模型绑定方式不同

IE使用attachEvent()，标准模型使用addEventListener()，且除IE浏览器外的主流浏览器不支持attachEvnent()

事件阶段不同

IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流

我们都知道，标准事件流有的三个阶段：
1.事件捕获
2.目标阶段
3.冒泡阶段

但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)。也就是说IE的事件只有两个阶段：
1.目标阶段
2.冒泡阶段

事件的兼容写法

作为开发者，对于市场上仍有机器使用的浏览器是IE，且版本久远。为了适配更多用户的浏览器，学会兼容写法对于我们来说十分重要

事件绑定

function addEventListener(element,type,fn,boolean=false) {
     
  //判断浏览器是否支持这个方法
  if(element.addEventListener){
     
    element.addEventListener(type,fn,boolean);
  }else if(element.attachEvent){
     
    element.attachEvent("on"+type,fn);
  }else{
     
    element["on"+type]=fn;	//如果以上两种方法都不支持，则通过（对象.事件 = 处理函数）的方式绑定事件
  }
}

事件委托

<ul id="ul1">
    <li>111li>
    <li>222li>
    <li>333li>
    <li>444li>
ul>

var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
     
　　var ev = ev || window.event;
　　//标准事件委托使用target,IE中使用srcElement
　　var target = ev.target || ev.srcElement;
　　if(target.nodeName.toLowerCase() == 'li'){
     
　　　　alert(123);
　　　  alert(target.innerHTML);
　　}
}

阻止冒泡

function stopBubble(event) {
     
/*因为IE中事件对象event存在于window中
若传入的参数event为真值，则e赋值为event;
若传入的参数event为假值，则e赋值为window.event;*/
  var e = event || window.event;
  if (e.stopPropagation) {
     
    //非IE
    e.stopPropagation();
  } else {
     
    //IE
    e.cancelBubble = true;
  }
}

阻止默认事件

function preventDefault(event) {
     
/*因为IE中事件对象event存在于window中
若传入的参数event为真值，则e赋值为event;
若传入的参数event为假值，则e赋值为window.event;*/
    var e = event || window.event;
    if (e.preventDefault)
    	//非IE
        e.preventDefault();
    else{
     
    	//IE
    	e.returnValue = false;
    }
    
}

关于网上流传this指向不同问题

本人使用IE8测试了一下，发现只是打印结果不同，但本质都指向绑定事件的元素。如有异议，欢迎各位大佬指出

<ul id="ul1">
    <li>111li>
    <li>222li>
    <li>333li>
    <li>444li>
ul>
<script>
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
      
　　console.log(this)
}
script>

IE8中this打印结果：

chrome中this打印结果：