封装绑定事件处理函数基础知识/考点

事件详解

事件冒泡及捕获

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是元素)时，现代浏览器运行两个不同的阶段 – 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达html元素。

阻止事件冒泡

用 stopPropagation() 修复问题

标准事件对象具有可用的名为 stopPropagation()的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};
复制代码

事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

答案

<ul id="list">
    <li id="li1">项目1</li>
    <li id="li2">项目2</li>
    <li id="li3">项目3</li>
</ul>
复制代码

const list = document.getElementById('list');
const li1 = document.getElementById('li1');
function bindEvent(elem,type,selector,cb){
    if(cb==null){
        cb=selector;
        selector=null;
    }
    elem.addEventListener(type,(event)=>{
        const target = event.target;
        if(selector){
            if(target.matches(selector)){
                cb(event)
            }
        }else{
            cb(event)
        }
    })
}
bindEvent(li1,'click',function(e){
    alert(e.target.innerHTML);
})
bindEvent(list,'click','li',function(e){
    alert(e.target.innerHTML);
})
复制代码