button添加插槽之后绑定不来事件_DOM事件模型和事件委托

事件模型

DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播，这种传播分成三个阶段。

1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
2. 目标阶段：真正的目标节点正在处理事件的阶段；
3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段

捕获是从上到下，事件先从window对象，然后再到document，然后是html标签，然后是body标签，然后按照普通的html结构一层一层往下传，最后到达目标元素。而事件冒泡的流程刚好是事件捕获的逆过程。

DOM的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。

所有 DOM 节点实例都有addEventListener方法，用来为该节点定义事件的监听函数，一旦这个事件发生，就会执行监听函数。

target.addEventListener(type, listener[, useCapture]);

该方法接受三个参数。

• type：事件名称，大小写敏感。
• listener：监听函数。事件发生时，会调用该监听函数。
• useCapture：布尔值，表示监听函数是否在捕获阶段触发，默认为false，该参数可选。

下面是一个例子。

function hello() {
  console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello, false);

上面代码中，button节点的addEventListener方法绑定click事件的监听函数hello，该函数只在冒泡阶段触发。

事件委托

每个函数都是对象，都会占用内存，所以当我们的页面中所包含的事件数量较多时,如果给每个节点绑定一个事件，加上事件处理程序，就会造成性能很差。还有一个问题是，某个元素节点是后来通过JavaScript动态添加进页面中的，这时候我们如果提前对它进行绑定，但此时该元素并不存在，所以会绑定事件会失败。解决上述两个问题的一个常用方案，就是使用事件委托。

举例来说：

document.querySelector('.box').addEventListener(function (event) {
    switch (event.target.id) {
      case "btn":
        console.log("btn was clicked");
        break;
      case "btn-2":
        console.log("btn-2 was clicked");
        break;
      default:
        console.log("box was clicked");
        break;
    }
});
$(".box").append("btn-2");

简单说，事件委托就是把本来该自己接收的事件委托给自己的上级（父级，祖父级等等）的某个节点，让自己的“长辈们”帮忙盯着，一旦有事件触发，再由“长辈们”告诉自己：“喂，孙子，有人找你~~”。