addEventListener()、attachEvent()和removeEventListener()、detachEvent()的区别？

addEventListener()和attachEvent()的区别？

addEventListener：在HTML元素上绑定事件，FF、chrome、opera、safari及IE9浏览器以上的支持
attachEvent:在HTML元素上绑定事件，只有IE浏览器支持

attachEvent语法：

element.attachEvent(event, function)event:事件名，注意要使用“on”前缀，如 onclickfunction:指定事件触发时执行的函数var outerDiv = document.getElementById("outerDiv");
    outerDiv.attachEvent("onclick", outerFn);

addEventListener语法：

element.addEventListener(event, function, useCapture)event:事件名，注意不使用“on”前缀，如 clickfunction:指定事件触发时执行的函数useCapture:指定事件是否在捕获或冒泡阶段执行。

true:在捕获阶段执行

false:在冒泡阶段进行，默认值为false;

var outerDiv = document.getElementById("outerDiv");    outerDiv.addEventListener("click", outerFn, true);

我们来理解一下addEventListener的第三个参数useCapture，这个参数是可选的。首先我们先定义一个HTML

  .container {    width:100px;    height:100px;    color:#fff;    text-align:center;    font:bold 20px/100px "微软雅黑";    background-color: #c60;    cursor:pointer;  }
<div id="outerDiv" class="container">  <div id="innerDiv" class="container" >请点我</div></div>
我们先将addEventListener的第三个参数设置默认的false:
  var console = console || {log: function( p ){ alert(p)}};  function outerFn(event) {    console.log("outerDiv Event");  }  function innerFn(event) {  console.log("innerDiv Event");  }  var outerDiv = document.getElementById("outerDiv");  if ( document.addEventListener ) {    outerDiv.addEventListener("click", outerFn, false);  } else {    outerDiv.attachEvent("onclick", outerFn);  }  var innerDiv = document.getElementById("innerDiv");  if ( document.addEventListener ) {    innerDiv.addEventListener("click", innerFn, true);  } else {    innerDiv.attachEvent("onclick", innerFn);  }
执行结果：
useCapture为false的意思是执行的是冒泡阶段，所以打印的效果是
我们先将addEventListener的第三个参数设置默认的true:
  var console = console || {log: function( p ){ alert(p)}};  function outerFn(event) {    console.log("outerDiv Event");  }  function innerFn(event) {  console.log("innerDiv Event");  }  var outerDiv = document.getElementById("outerDiv");  if ( document.addEventListener ) {    outerDiv.addEventListener("click", outerFn, true);  } else {    outerDiv.attachEvent("onclick", outerFn);  }  var innerDiv = document.getElementById("innerDiv");  if ( document.addEventListener ) {    innerDiv.addEventListener("click", innerFn, true);  } else {    innerDiv.attachEvent("onclick", innerFn);  }

执行结果：
useCapture为true的意思是执行的是捕获阶段，所以打印的效果是
addEventListener事件有捕获阶段或冒泡阶段，那attachEvent事件？ attachEvent只有冒泡阶段、通过IE浏览器打印结果看
先弹出一个innerDiv对话框
再弹出另一个outerDiv对话框
一般情况下我们不希望出现冒泡或捕获,当点击div.innerDiv元素时不需要触发div.outerDiv事件，怎么办呢？接下来我们可以看下面这二个属性：
event.stopPropagation(); 支持FF=> 停止传播
event.cancelBubble = true; 支持IE => 取消冒泡
var console = console || {log: function( p ){ alert(p)}};  function outerFn(event) {    console.log("outerDiv Event");  }  function innerFn(event) {    console.log("innerDiv Event");    if ( event.stopPropagation) {      event.stopPropagation();    } else {      event.cancelBubble = false;    }  }  var outerDiv = document.getElementById("outerDiv");  if ( document.addEventListener ) {    outerDiv.addEventListener("click", outerFn, false);  } else {    outerDiv.attachEvent("onclick", outerFn);  }  var innerDiv = document.getElementById("innerDiv");  if ( document.addEventListener ) {    innerDiv.addEventListener("click", innerFn, true);  } else {    innerDiv.attachEvent("onclick", innerFn);  }
removeEventListener()和detachEvent()的区别？
removeEventListener：在HTML元素上移出绑定事件，FF、chrome、opera、safari及IE9浏览器以上的支持detachEvent:在HTML元素上移出绑定事件，只有IE浏览器支持
detachEvent定、语法：element.detachEvent(event, function)event:事件名，注意要使用“on”前缀，如 onclickfunction:指定事件触发时执行的函数removeEventListener语法：element.removeEventListene(event, function, useCapture)event:事件名，注意不使用“on”前缀，如 clickfunction:指定事件触发时执行的函数useCapture:指定事件是否在捕获或冒泡阶段执行。true:在捕获阶段执行false:在冒泡阶段进行，默认值为false;
如果添加时用的捕获阶段，那么在移除时也要用捕获阶段，否则无法移除它们。
如果是同一个元素同一个调用函数同一个useCapture值绑定多次，在移除时只需要执行一次移除。
注意: 如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。
假如在div.outerDiv上绑定二次，一次是冒泡、一次是捕获试，在移除绑定时也要移除二次，一次是冒泡，一次是捕获
 var console = console || {log: function( p ){ alert(p)}};  function outerFn(event) {    console.log("outerDiv Event");  }  function innerFn(event) {    console.log("innerDiv Event");    if ( event.stopPropagation ) {      event.stopPropagation();    } else {      event.cancelBubble = true;    }  }  var outerDiv = document.getElementById("outerDiv");  //绑定一次 冒泡方式  if ( document.addEventListener ) {    outerDiv.addEventListener("click", outerFn, false);  } else {    outerDiv.attachEvent("onclick", outerFn);  }  // 绑定二次 捕获方式  if ( document.addEventListener ) {    outerDiv.addEventListener("click", outerFn, true);  } else {    outerDiv.attachEvent("onclick", outerFn);  }  //移除绑定一次 冒泡方式  if ( document.addEventListener ) {    outerDiv.removeEventListener("click", outerFn, false);  } else {    outerDiv.detachEvent("onclick", outerFn);  }  // 移除绑定二次 捕获方式  if ( document.addEventListener ) {    outerDiv.removeEventListener("click", outerFn, true);  } else {    outerDiv.detachEvent("onclick", outerFn);  }

秒客网

addEventListener()、attachEvent()和removeEventListener()、detachEvent()的区别？

相关文章