事件绑定

  1. //通用的绑定函数
  2. function bindEvent(elem,type,fn){
  3.         elem.addEventListener(type,fn)
  4. }
  5. // 普通绑定
  6. const btn1 = document.getElementById('btn1')
  7. bindEvent(btn1, 'click', function (event) {
  8.     // console.log(event.target) // 获取触发的元素
  9.     event.preventDefault() // 阻止默认行为,比如禁止链接跳转
  10.     alert(this.innerHTML)
  11. })

事件冒泡

image.png

事件代理

  • 是什么:基于事件冒泡实现的事件绑定,将子元素触发的事件交给父元素的事件处理函数处理
  • 作用:多个元素需要同事件同事件处理函数。//不要滥用
  • 优点:代码简洁；减少浏览器内存占用(因为dom事件是由web apis管理的,触发时将事件添加到回调栈中执行)

通过冒泡机制，在祖先元素上绑定事件，然后通过e.target 来判断是哪个元素触发的事件
image.png
我们将事件绑定函数进化一下，使监听函数中的逻辑变得简单些，并且可以使其既支持普通绑定又支持代理绑定。则绑定代码如下：

  1. function bindEvent(elem, type, selector, fn) {
  2.     if (fn == null) {
  3.         fn = selector
  4.         selector = null
  5.     }//普通绑定传入三个参数，第三个参数selector此时是回调函数
  6.     elem.addEventListener(type, event => {
  7.         const target = event.target
  8.         if (selector) {
  9.             // 代理绑定
  10.             if (target.matches(selector)) {//matchs是判断一个css元素是否符合selector选择器。如上述HTML代码，点击a标签符合，点击button不符合。因为我们传入的是a标签。
  11.                 fn.call(target, event)
  12.             }
  13.         } else {
  14.             // 普通绑定
  15.             fn.call(target, event)
  16.         }
  17.     })
  18. }
  19. const div3 = document.getElementById('div3')
  20. bindEvent(div3, 'click', 'a', function (event) {
  21.     event.preventDefault()
  22.     alert(this.innerHTML)
  23. })

面试题

编写一个通用的事件监听函数

描述事件冒泡的流程

  • 基于DOM树形结构
  • 事件会顺着触发元素网上冒泡

  • 应用场景∶代理

    无限下拉的图片列表，如何监听每个图片的点击?

  • 事件代理

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