JavaScript事件对象与事件委托-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57156683/article/details/125671551

事件对象【理解】

1 什么是事件对象

触发事件时，事件对象会作为默认参数默认传入到function中。

2 事件对象的属性

e.target：事件源
e.type: 事件类型
e.clientX: 水平坐标
e.clientY: 垂直坐标
e.keyCode: 键盘码
e.which: 鼠标按键的值

3 事件对象的方法

e.preventDefault() // 阻止浏览器的默认行为
- 可以阻止a标签的跳转。
- 可以阻止form标签的默认提交
e.stopPropagation() // 阻止事件冒泡
事件委派

事件委派，就是嵌套内部的标签需要触发的事件，不直接绑到嵌套内部的标签，而是把事件绑定到父标签上。

事件委派的好处：提高性能; 动态渲染的标签也可以触发事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul id="list">
      <li>111</li>
      <li>222</li>
      <!-- ---- -->
    </ul>

    <script>
      setTimeout(function () {
        // 创建一个li标签
        let li = document.createElement("li");
        // 添加内容
        li.textContent = "我是新来的";
        // 加入ul中
        list.appendChild(li);
        // console.log("9999");
      }, 3000);

      // 获取ul
      const list = document.querySelector("#list");

      // 获取所有li
      // const lis = document.querySelectorAll("li");
      // // 循环绑定事件
      // lis.forEach(function (li) {
      //   li.addEventListener("click", function () {
      //     console.log("666");
      //   });
      // });

      // 事件委托(事件委派 / 事件代理):  本来是给儿子绑定的事件 委托给了父亲绑定
        list.addEventListener("click", function () {
          console.log("5555");
        });
    </script>
  </body>
</html>