IE兼容性

2024年5月25日 216次阅读 来源: 小被子 
<body>
  <div>
    <div id="div1">hello1</div> //体式格局1
    <div id="div2">hello2</div> //体式格局2
    <div id="div3" onclick="test()">hello3</div> //体式格局3
  </div>
</body>
<script type="text/javascript">
  document.getElementById('div1').addEventListener('click', function(evt) {
    console.log(this); //指向<div id="div1">hello1</div>节点对象
    console.log(evt); //输出事宜对象
    console.log(event); //输出事宜对象
    console.log(arguments[0]); //输出事宜对象
  }, false);
  document.getElementById('div2').onclick = function(evt) {
    console.log(this); //指向<div id="div2">hello2</div>节点对象
    console.log(evt); //输出事宜对象
    console.log(event); //输出事宜对象
    console.log(arguments[0]); //输出事宜对象
  }
  function test(evt) {
    console.log(this); //指向全局对象window
    console.log(evt); //undefined
    console.log(event); //输出事宜对象
    console.log(arguments[0]); //undefined
  }
</script>

假如是体式格局1,2,function定义的时刻也能够没有evt形参,然则被挪用的时刻一定会通报一个事宜对象,假如有形参evt,则用evt吸收,假如没有,能够在函数内直接经由过程event或arguments[0]接见.
假如是体式格局3,当是test()挪用时,则不会通报事宜对象,evt和arguments[0]均输出undefined.假如是test(evt)挪用,则通报事宜对象,evt和arguments[0]均输出事宜对象

以下内容都是基于http://harttle.com/2015/08/14…的总结

事宜处置惩罚函数中,我们一般运用this来猎取当前被操纵的对象,但关于差别的事宜绑定体式格局,this能够不一定指代的是当前被操纵的对象.罕见的事宜绑定体式格局基本上是以下这些:
1.attachEvent: IE9以下(不包含IE9).
2.addEventListener: 支撑DOM Level2 Event的浏览器中.
3.el.onclick = function() {}
4.<div onclick=”handle()”></div>
5.jQuery也供应了许多要领来方便地绑定事宜.
addEventListener是当代web运用中绑定事宜的最终要领.

attachEvent与addEventListener的辨别
1.支撑的浏览器差别,attachEvent在IE9以下的版本中遭到支撑,其他的都支撑addEventListener.
2.参数差别,addEventListener第三个参数能够指定是不是捕捉,而attachEvent不支撑捕捉.
3.事宜名差别.attachEvent的第一个参数事宜名前要加on.
4.this差别.概况见下

attachEvent体式格局的事宜绑定
attachEvent的this老是指向Window.比方:

el.attachEvent('onclick', function() {
  alert(this);
});

剧本设置onclick体式格局的事宜绑定
设置DOM对象的onclick属性，this老是指向被设置的DOM元素。比方：

document.getElementById('id1').onclick = function() {
  console.log(this);//<div id="id1">...</div>
}

HTML中设置onclick体式格局的事宜绑定
在HTML中设置onclick属性即是让Window挪用该函数,因而this老是指向Window.比方:

<div onclick="clickHandler()"></div>
<script>
functon clickHandler() {
  console.log(this);
}
</script>

addEventListener体式格局的事宜绑定
addEventListener的this老是当前正在处置惩罚事宜的谁人DOM对象,DOM Level2 Event Model中提到,事宜处置惩罚包含捕捉阶段/目的阶段/冒泡阶段
图片泉源：http://www.w3.org/TR/DOM-Leve…
事宜当前正在流过哪一个元素,this便指向哪一个元素.比方两级的DOM:

<div id="l1">
  <div id="l2"></div>
</div>
<script type="text/javascript">
var l1 = document.getElementById('l1'),
    l2 = document.getElementById('l2');
l1.addEventListener('click', function(){
  console.log('l1 capture', this);
}, true);
l1.addEventListener('click', function(){
  console.log('l1 bubbling', this);
});
l2.addEventListener('click', function(){
  console.log('l2 target', this);
})
</script>

点击div#l2后控制台输出为：

l1 capture <div id=​"l1">​…​</div>​
l2 target <div id=​"l2">​</div>​
l1 bubbling <div id=​"l1">​…​</div>​

target与currentTarget
addEventListener的事宜处置惩罚函数中的this不一定指向事实上被点击的元素,但事宜处置惩罚函数的参数event对象供应了target和currentTarget属性来辨别这当前对象和目的对象.我们能够将它们悉数输出看看:

l1.addEventListener('click', function(e) {
  console.log('l1 capture', this, e.currentTarget, e.target);
});
l2.addEventListener('click', function(e) {
  console.log('l2 target', this, e.currentTarget, e.target);
});
l1.addEventListener('click', function(e) {
  console.log('l1 bubbling', this, e.currentTarget, e.target);
});

结果是:

l1 capture  <div id=​"l1">​…​</div>​  <div id=​"l1">​…​</div>​  <div id=​"l2">​</div>​
l2 target   <div id=​"l2">​</div>​   <div id=​"l2">​</div>​   <div id=​"l2">​</div>​
l1 bubbling <div id=​"l1">​…​</div>​  <div id=​"l1">​…​</div>​  <div id=​"l2">​</div>​

可见currentTarget老是和this雷同,而target指向事实上被点击的目的DOM对象.

关于XMLHttpRequest的兼容性

<script type="text/javascript">
   var i = 0,
       xhr = null,
       ids = [
         'MSXML2.XMLHTTP.3.0',
         'MSXML2.XMLHTTP',
         'Microsoft.XMLHTTP'
       ];
   if(window.XMLHttpRequest) {
     // IE7, Chrome, Firefox, Opera, etc
     xhr = new XMLHttpRequest();
   } else {
     // IE6, IE5
     for(i; i < ids.length; i++) {
       try {
         xhr = new ActiveXObject(ids[i]);
         break;
       } catch(e) {}
     }
   }
</script>

增加相应事宜函数的兼容性

<script type="text/javascript">
function callback(evt) {
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;
  console.log(target.nodeName);
}
if(document.addEventListener) {
  document.addEventListener('click', callback, false);
} else if(document.attachEvent) {
  document.attachEvent('onclick', callback);
} else {
  document.onclick = callback;
}
</script>
    原文作者：小被子
    原文地址: https://segmentfault.com/a/1190000008551080
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞