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

时间:2021-09-29 04:36:47
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()、attachEvent()和removeEventListener()、detachEvent()的区别?
我们先将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()和removeEventListener()、detachEvent()的区别?
addEventListener事件有捕获阶段或冒泡阶段,那attachEvent事件? attachEvent只有冒泡阶段、通过IE浏览器打印结果看
先弹出一个innerDiv对话框
addEventListener()、attachEvent()和removeEventListener()、detachEvent()的区别?
再弹出另一个outerDiv对话框
addEventListener()、attachEvent()和removeEventListener()、detachEvent()的区别?
一般情况下我们不希望出现冒泡或捕获,当点击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);  }