【JS】事件冒泡与事件委托

事件冒泡与事件委托

1.事件冒泡

根据事件冒泡机制，当上一级元素也有同名事件时，会自动触发。

<!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>事件冒泡</title>
  </head>
  <body>
    <div>
      <button>点击</button>
    </div>
    <script>
      document.querySelector('button').onclick = function () {
        console.log(this.tagName);
      };
      //根据事件冒泡机制，当上一级元素也有同名事件时，会自动触发
      //button 父级 div
      document.querySelector('div').onclick = function () {
        console.log(this.tagName);
      };
      //div 父级 body
      document.querySelector('body').onclick = function () {
        console.log(this.tagName);
      };
      //body 父级 html
      document.querySelector('html').onclick = function () {
        console.log(this.tagName);
      };
    </script>
  </body>
</html>

2.事件委托

总结:

1.基于事件委托原理，点击子元素，也会触发父元素
2.点击子元素（如li），等同点击父元素(如ul)
3.将事件绑定到父元素即可实现事件委托

<!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>事件委托</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      //以下关于事件委托总结:
      //1.基于事件委托原理，点击子元素，也会触发父元素
      //2.点击子元素（如li），等同点击父元素(如ul)
      //3.将事件绑定到父元素即可实现事件委托
      //具体调用方法如下：
      //   document.querySelector('ul').onclick = function (ev) {
      //     console.log(ev.target.textContent);
      //   };
      //任务：点击<li>,显示出它的内容文本
      //（一）传统方式
      //   document.querySelectorAll('li').forEach((li) => {
      //     // console.log(li.textContent);
      //     li.onclick = () => {
      //       console.log(li.textContent);
      //     };
      //   });
      //（二）事件冒泡方法
      //原理：li.onclick 必然会在 ul.onclick 上触发，只要在ul上写一个点击事件
      document.querySelector('ul').onclick = function () {
        // console.log(li.textContent);
        // console.log(this)
        // 事件委托中，不要用this
        // this 不能用它来引用事件触发主体
      };
      //事件对象参数
      //事件方法传参：要么传“事件对象”，要么就不要传参
      document.querySelector('ul').onclick = function (ev) {
        //ev：事件对象
        //console.log(ev);
        // 事件委托：事件主体不再是一个元素
        // 事件主体：二部分组成
        // 1.事件绑定“主体”：被添加了事件属性的元素，<ul>
        // ev.currentTarge
        // console.log(ev.currentTarget);
        // 2. 事件“触发”主体：用户实际点击的元素，<li>
        // ev.targe
        // console.log(ev.target);
        console.log(ev.target.textContent);
        //事件主体再讲：绑定主体，触发主体是父子关系 或 祖孙关系
        // 事件委托：事件主体一分为二
      };
    </script>
  </body>
</html>

【JS】事件冒泡 与 事件委托

事件冒泡 与 事件委托

1.事件冒泡

2.事件委托

总结:

相关文章

事件冒泡与事件委托