【前端面试指南】JS-7-Web-API-事件

1. 事件绑定

   const btn = document.getElementById('btn1')
   btn.addEventListener('click', event => {
       console.log('clicked')
   }
   

   // 事件绑定函数
   function bindEvent (elem, type, fn) {
       elem.addEventListener(type, fn)
   }
   
   const btn1 = document.getElementById('btn1')
   bindEvent(btn1, 'click', function (event) {
       event.preventDefault() // 阻止默认行为
       alert('clicked ')
   })
   

2. 事件冒泡

   1. 描述事件冒泡的流程
      1. 基于DOM树形结构
      2. 事件会顺着触发元素向上冒泡
      3. 应用场景：代理

   const p1 = document.getElementById('p1')
   bindEvent(p1, 'click', function (event) {
       event.stopPropagation() // 阻止事件冒泡
       console.log('激活')
   })
   
   const body = document.body
   bindEvent(body, 'click', function (event) {
       console.log('取消')
   })
   

3. 事件代理

   1. 代码简洁，减少浏览器内存占用，但是不要滥用。

   const div1 = document.getElementById('div1')
   bindEvent(div1, 'click', function (event) {
       event.preventDefault() // 阻止默认行为
       const target = event.target
       if (target.nodeName === 'A') {
           alert(target.innerHTML)
       }
   })
   

4. 考虑事件代理，编写一个通用的事件监听函数

   function bindEvent (elem, type, selector, fn) {
       if (fn == null) {
           fn = selector
           selector = null
       }
       elem.addEventListener(type, function (event) {
           const target = event.target
           if (selector) {
               // 代理绑定
               if (target.matches(selector)) {
                   fn.call(target, event)
               }
           } else {
               // 普通绑定
               fn.call(target, event)
           }
       })
   }
   

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

   1. 事件代理
   2. 用 event.target 获取触发元素
   3. 用 matches 来判断是否是触发元素