首页 > 代码库 > IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别

IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别

一:在布局中直接添加事件处理

  <div id="div1" onclick="fOne();"></div> 

  <script>
    var oDiv1 = document.getElementById("div1");
    function fOne(){
      alert(this===window);//true
    }
  </script>

  弹出true,是因为在布局中调用的时候省略了window,全面的应该是window.One();

 

二:所有浏览器都支持DOM0级事件处理程序,且使用该方式时,事件处理程序是在元素的作用域中运行,因此程序中的this都是指向元素。

var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
  alert(this===oDiv1);//true
}

移出事件处理:

  oDiv1.onclick = null;

目前为止,我还是非常喜欢DOM0级事件处理程序的,没有浏览器兼容性问题;

三:DOM2级事件处理程序(事件监听机制)可以给同一个元素依次添加多个事件处理;

以下是事件监听机制在使用时的注意事项:

  IE9(含)以上,firefox,chrome,safari使用以下方法: 

  var oDiv1 = document.getElementById("div1");
  function fOne(){
    alert(this===oDiv1);//true
  }
  oDiv1.addEventListener("click",fOne,false);

  其中各个参数的意思,自己去查w3c,http://www.w3school.com.cn/,自己动手,丰衣足食。

  移出事件处理:

  oDiv1.removeEventListener("click",fOne,false);

  只能使用这一种。

  IE8(含)以下的IE浏览器使用以下方法:

  oDiv1.attachEvent("onclick",fOne);

  移出事件处理:

  oDiv1.detachEvent("onclick",fOne);

  也是只能使用这一种。

  注意以上蓝色地方的不同;

  PS:IE9,IE10以上两种方式都支持。IE11支持的是第一种,其实,现在的IE11还是紧跟规范的,值得嘉奖……同时,也看到了未来前端开发的美好日子……

  下边还有最坑妹的地方,在IE所特有的DOM2级事件处理程序是在全局作用域中执行的,也就是说,此时的this指向的是window

  在IE8和以下的IE浏览器中测试:   

  function fOne(){
    alert(this===window);//true
  }
  oDiv1.attachEvent("onclick",fOne);

  如果你觉得这里没有必要写===,那么,O(∩_∩)O哈哈~,诡异的事情来喽~~~~

  function fOne(){
    alert(this==oDiv1);//true
  }
  oDiv1.attachEvent("onclick",fOne);

  刚开始,我也很奇怪,但是,我们单独将this弹出一下看看:

  IE8弹出的是:                                   IE7(含)以下弹出的是:

             

  IE8(含)以上的浏览器和别的浏览器除了说明this是一个对象以外,还会说明是什么类型,但是IE7(含)以下就表现的比较含蓄了……(总算IE知错能改……)

  然后,我们再弹出oDiv看看:

  IE8弹出的是:                                                  IE7(含)以下弹出的是:                    

              

  接下来,再弹出window看看:

  IE8弹出的是:                                             IE7(含)以下弹出的是:

                      

  从IE8的弹出框中的值我们可以看到,oDiv1跟window两个实际上值是相等的都是object,但是类型不同,这样也就解决了,为什么上面==是true,而===是false了,但是,请恕小女子才疏学浅,HTMLDivElement这个类的定义属于什么范畴的知识???请过路大神赐教……

 

IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别