《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

2019年8月30日 149次阅读 来源: noiron

JavaScript和HTML之间的交互是经由过程事宜完成的。

事宜：文档或浏览器窗口中发作的一些特定的交互霎时。

能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的代码。

1. 事宜流

事宜流：从页面中吸收事宜的递次。

IE和Netscape开辟团队提出了差不多是完整相反的事宜流的观点。

  • IE: 事宜冒泡流
  • Netscape： 事宜捕捉流

1.1 事宜冒泡

事宜冒泡（event bubbling）：事宜开始时由最详细的元素（文档中嵌套条理最深的谁人节点）吸收，然后逐级向上传播到较为不详细的节点（文档）。

1.2 事宜捕捉

事宜捕捉（event capturing）:不太详细的节点应当更早吸收到事宜，最详细的节点应当末了吸收到事宜。

事宜捕捉的意图在于在事宜抵达预定目的之前捕捉它。

1.3 DOM事宜流

“DOM2级事宜”划定的事宜流包括三个阶段：

1. 事宜捕捉阶段
2. 处于目的阶段
3. 事宜冒泡阶段

2. 事宜处置惩罚递次

事宜是用户或浏览器本身实行的某种行动。如：click，load，mouseover。
相应某个事宜的函数称为事宜处置惩罚递次（或事宜侦听器）。

2.1 HTML事宜处置惩罚递次

某个元素支撑的每种事宜，都能够运用一个与相应事宜处置惩罚递次同名的HTML特征来指定。

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

单击按钮，显现正告框。经由过程指定 onclick 特征并将一些JavaScript代码作为它的值来定义。

在HTML中定义的事宜处置惩罚递次能够包括要实行的详细行动，也能够挪用在页面其他地方定义的剧本。

<script type="text/javascript">
    function showMessage() {
        alert("Hello world");
    }
</script>
<input type="button" value="Clicke Me" onclick="showMessage()" />

事宜处置惩罚递次中的代码在实行时，有权接见全局作用域中的任何代码。

瑕玷：

  1. 存在时差题目。用户在事宜处置惩罚递次被剖析之前就触发了事宜。
  2. 扩大事宜处置惩罚递次的作用域链在差别的浏览器中会致使差别效果。
  3. HTML和JavaScript代码严密耦合。

2.2 DOM0 级事宜处置惩罚递次

经由过程JavaScript指定事宜处置惩罚递次的传统体式格局，就是将一个函数赋值给一个事宜处置惩罚递次属性。

这类要领被称为事宜处置惩罚递次赋值，出现在第四代 Web 浏览器中。

每一个元素（包括 window 和 document）都有本身的事宜处置惩罚递次属性，属性一般悉数小写，如 onclick。将这类属性的值设置为一个函数，就能够指定事宜处置惩罚递次。

    <input type="button" id="myBtn" value="Click Me" />
    
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function() {
            alert("Clicked");
        }
    </script>

能够删除经由过程 DOM0 级要领指定的事宜处置惩罚递次。

btn.onclick = null;    // 删除事宜处置惩罚递次

2.3 DOM2 级事宜处置惩罚递次

“DOM2级事宜”定义了两个要领，用于处置惩罚指定和删除事宜处置惩罚递次的操纵：

  • addEventListener()
  • removeEventListener()

一切 DOM 节点都包括这两个要领，它们接收3个参数：

  1. 要处置惩罚的事宜名
  2. 作为事宜处置惩罚递次的函数

  3. 一个布尔值：

    • true: 捕捉阶段挪用事宜处置惩罚递次
    • false: 冒泡阶段挪用

为一个按钮增加 onclick 事宜处置惩罚递次：

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

运用 DOM2级要领增加事宜处置惩罚递次的重要优点是能够增加多个事宜处置惩罚递次。

用 addEventListener() 增加的事宜处置惩罚递次只能运用 removeEventListener() 来移除，移除时传入的参数与增加时的参数雷同。所以，用 addEventListener() 增加的匿名函数将没法移除。

大多数状况下，都是将事宜处置惩罚递次增加到事宜流的冒泡阶段，如许能够最大限制地兼容种种浏览器。

2.4 IE 事宜处置惩罚递次

IE 完成了与 DOM 中相似的两个要领：

  • attachEvent()
  • detachEvent()

接收两个参数：事宜处置惩罚递次称号、事宜处置惩罚递次函数
经由过程这类要领增加的事宜处置惩罚递次会被增加到冒泡阶段。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function() {
    alert("clicked");
});

注重： attachEvent() 的第一个参数是“onclick”,而不是 addEventListener()要领中的“click”。

在IE中运用 attachEvent() 与运用 DOM0 级要领的重要区分在于事宜处置惩罚递次的作用域。

  • DOM0 级要领：事宜处置惩罚递次会在其所属元素的作用域内运转
  • attachEvent()要领：事宜处置惩罚递次会在全局作用域内运转，this 即是 window。

2.5 跨浏览器的事宜处置惩罚递次

建立一个要领 addHandler()，它属于名叫EventUtil的对象视状况离别运用 DOM0级要领、 DOM2级要领或IE要领来增加事宜。

addHandler()要领吸收3个参数：

  1. 要操纵的元素
  2. 事宜称号
  3. 事宜处置惩罚递次函数

与其对应的要领是 removeHandler()，吸收雷同的参数。

var EventUtil = {
    addHandler:  function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
}

这两个要领起首都邑检测传入的元素中是不是存在DOM2级要领。假如存在DOM2级要领，则运用该要领。假如存在的是IE的要领，则采用第二种计划。

像下面如许运用EventUtil对象：

var btn = document.getElementById("myBtn");
var handler = function() {
    alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removerHandler(btn, "click", handler);
    原文作者：noiron
    原文地址: https://segmentfault.com/a/1190000004274530
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞