熟悉 dom0级事件模型、dom2事件模型

熟悉 dom0级事件模型和dom2事件模型

dom0级

理解：在之前IE与Netscape的规范则被称为DOM0，dom0 级事件简单的来说就是普通的 “on+监听事件”。
有两种写法：
①第一种：在标签内部写

<input  id='btn' type="button" value="点点点" onclick="console.log('点击一次！')" >

②第二种：给想要的元素添加

document.getElementById("btn").onclick = function(){
   console.log('点击了！')
}

注： DOM0级事件绑定 会存在覆盖的问题；下边的代码会把上边的代码覆盖
如：

document.getElementById("btn").onclick = function(){
   console.log('点击第一次！')
}

document.getElementById("btn").onclick = function(){
   console.log('点击第二次！')
}

点击btn之后输出 点击第二次！

dom2级

理解：监听方法，添加和移除事件处理程序：addEventListener()和removeEventListener()。
添加事件绑定：

document.getElementById("btn").addEventListener("click", function(){
      console.log('点击了!);
});

该事件会有三个固定参数：
addEventListener(event、function、useCapture)
参数①event： 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
参数②function：必须。指定要事件触发时执行的函数。注： 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
参数③useCapture： 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
注： true - 事件句柄在捕获阶段执行；false- false- 默认。事件句柄在冒泡阶段执行。
注： 跟dom0事件的最大区别，就是可以给一个元素多次绑定相同类型事件。

document.getElementById("btn").addEventListener("click", function(event){
      console.log('点击第一次！');
});

document.getElementById("btn").addEventListener("click", function(event){
      console.log('点击第二次！');
});

点击btn之后输出 点击第一次！再显示 点击第二次！

拓展：

冒泡和捕获

冒泡：（默认 ，第三个参数为false ，可以省略）

<div id="block1">
  <div id="block2">
    <div id="block3">点击</div>
  </div>
</div>

document.getElementById("block1").addEventListener("click", function(){
      console.log('点击了block1！');
});
document.getElementById("block2").addEventListener("click", function(){
      console.log('点击了block2！');
});
document.getElementById("block3").addEventListener("click", function(){
      console.log('点击了block3！');
});

执行顺序：（由内向外）‘点击了block3！’—>‘点击了block2！’—>‘点击了block1！’。
捕获：（ 第三个参数为true）

document.getElementById("block1").addEventListener("click", function(){
      console.log('点击了block1！');
},true);
document.getElementById("block2").addEventListener("click", function(){
      console.log('点击了block2！');
},true);
document.getElementById("block3").addEventListener("click", function(){
      console.log('点击了block3！');
},true);

执行顺序：（由外向内）‘点击了block1！’—>‘点击了block2！’—>‘点击了block3！’。

也可以另外手动阻止冒泡：阻止冒泡：event.stopPropagation() （低版本IE：event.cancelBubble() ）。
总结：
①DOM0级事件绑定会存在覆盖的问题。
②一个元素多次绑定相同类型事件。
③手动阻止冒泡event.stopPropagation() （低版本IE：event.cancelBubble() ）。