javascript复习：事件绑定和事件冒泡

题目

• 编写一个通用的事件监听函数
• 描述事件冒泡的流程
• 无线下拉的图片列表，如何监听每一个图片的点击？

知识点

• 事件绑定
• 事件冒泡
• 事件代理

问题解答： 编写一个通用的事件监听函数

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector;
    }
    
    elem.addEventListener(type, function (event) {
        const target = event.target;

        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
                fn.call(target, event);
            }
        } else {
            // 普通绑定
            fn.call(target, event);
        }
    })
}

问题解答： 描述事件冒泡的流程

• 基于DOM树形结构
• 事件会顺着出发元素往上冒泡
• 应用场景：事件代理

  问题解答： 无线下拉的图片列表，如何监听每一个图片的点击？

• 事件代理
• 用e.target 获取触发元素
• 用 matches 来判断是否触发元素

补充： 如何阻止事件冒泡和默认（行为）事件

链接：https://blog.csdn.net/binlety/article/details/81390433

• 1.event.stopPropagation()方法
  这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

• 2.event.preventDefault()方法
  这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

• 3.return false ；
  这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件

但是需要注意的是：

• IE：
  window.event.cancelBubble = true;//停止冒泡
  window.event.returnValue = false;//阻止事件的默认行为

• Firefox：
  event.preventDefault();// 取消事件的默认行为
  event.stopPropagation(); // 阻止事件的传播