JavaScript-⑧

版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/83309076

Event

• DOM操作 ：获得DOM元素的引用，以便进行操作；改变DOM元素的外观，可以直接修改，也可以使用动画； 修改DOM元素的内容

• 事件：以上的操作都是在页面初始化、特定的事件或在一段时间发生后得以执行
  1.事件流：事件流描述的是从页面中接收事件的顺序。
  冒泡机制
  IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
  捕获机制
  Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
  2.“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
  首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。
  多数支持DOM 事件流的浏览器都实现了一种特定的行为；即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标。
  3.阻止事件流的传播——调用event.stopPropagation（）
  4.事件处理程序

• html

  <input type="button" value="Click Me" onclick="alert('Clicked')" />

• DOM0

 var btn = document.getElementById("myBtn");
           btn.onclick = function(e){
           alert("Clicked");};
           // <!-- 优势：简单 -->
           // <!-- 不足：仅能为指定元素指定事件添加一个事件处理程序 -->

• DOM2
  定义：DOM2 级事件处理程序
  “DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(e){
alert(this.id);
}, false);