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

addEventListener()和attachEvent()的差别？

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

attachEvent语法：

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

addEventListener语法：

element.addEventListener(event, function, useCapture)
event:事件名，注意不使用“on”前缀。如 click
function:指定事件触发时运行的函数
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”前缀。如 onclick
function:指定事件触发时运行的函数

removeEventListener语法：

element.removeEventListene(event, function, useCapture)
event:事件名，注意不使用“on”前缀，如 click
function:指定事件触发时运行的函数
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);
  }

来源：https://www.cnblogs.com/cynchanpin/p/7137610.html

标签

event

onclick