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的意思是运行的是捕获阶段，所以打印的效果是


watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />



addEventListener事件有捕获阶段或冒泡阶段，那attachEvent事件？ attachEvent仅仅有冒泡阶段、通过IE浏览器打印结果看
先弹出一个innerDiv对话框


watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

再弹出还有一个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);

  }