JavaScript基础：事件绑定、事件冒泡、事件代理

最新推荐文章于 2024-01-25 16:34:59 发布

GY_U_YG

最新推荐文章于 2024-01-25 16:34:59 发布

阅读量377

点赞数

分类专栏： 2022面试前端文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/GY_U_YG/article/details/125344544

版权

前端同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

2022面试

9 篇文章 3 订阅

订阅专栏

题目
1、编写一个通用的事件监听函数
2、描述事件冒泡的流程
3、无限下拉的图片列表，如何监听每个图片的点击？

知识点：

事件绑定
事件冒泡
事件代理
preventDefault 和 stopPropagation

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', e => {
  console.log(e.target) // 触发的元素
  e.preventDefault() // 阻止默认行为，比如a标签默认行为是跳转，就不跳了
})

在这里插入图片描述

二、事件冒泡

点击一个div，会一级一级向父级、爷级元素上冒泡，这个点击事件不仅能被这个div捕捉到，也能被他的父级、爷爷级…元素捕捉到。看下面的例子。
在这里插入图片描述

但有的时候我们不想让事件往上冒泡怎么办，有个方法stopPropagation。
只要在被点击的元素上使用该方法即可。

三、事件代理

事件代理是基于冒泡的。

比如一个div里面有很多个a 标签，每个a 标签都有对应的点击事件，而且a标签的数量可以动态增加、减少。你不可能在每个a标签上都手动绑定一个事件，一是没法操作，二是性能极差。这个时候就要用这些a标签的父级元素来委托监听，基于冒泡事件，反正每个子元素的事件都能冒上来嘛。

在这里插入图片描述

优点：

代码简洁
减少浏览器内存占用

代码优化：

<!DOCTYPE html>
<html>
  <head>
    <title>areyouok</title>
    <style>
      #div1, #div2 { border: 1px solid red; }
    </style>
  </head>
  <body>
    <button id="btn1">一个按钮</button>
    <div id="div1">
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <button>加载更多...</button>
    </div>


    <script src="./demo.js"></script>
  </body>
</html>

// 手写事件绑定函数
// function bindEvent(elem, type, fn) {
//   elem.addEventListener(type, fn)
// }
// fn == null <==> fn === null || fn === undefined
function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, event => {
    let target = event.target
    console.log('target: ', target)
    if (selector) {
      // 代理绑定
      if (target.matches(selector)) {
        console.log('.....', target.matches(selector))
        // call的用法，在target上调用fn，目的是调用能用this
        fn.call(target, event)
      }
    } else {
      // 普通绑定
      fn.call(target, event)
    }
  })
}


// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function(event) {
  event.preventDefault()
  alert(this.innerHTML)
})

// 明明是a标签的事件，完全在他们的父元素div1中来处理，这叫委托代理
const div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(event) {
  // a标签 的默认事件要阻止，免得跳转
  event.preventDefault()
  // const target = event.target
  // if (target.nodeName === 'A') {
  //   alert(target.innerHTML)
  // }
  // 
  // 期待可用this，this就是指被点击的节点(比如这里就是传来的a标签)
  console.log('this: ', this)
  alert(this.innerHTML)
  
})