Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS】事件冒泡 与 事件委托
Blogger Information
Blog 94
fans 0
comment 0
visits 92687
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS】事件冒泡 与 事件委托
可乐随笔
Original
631 people have browsed it

事件冒泡 与 事件委托

1.事件冒泡

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件冒泡</title>
  8.   </head>
  9.   <body>
  10.     <div>
  11.       <button>点击</button>
  12.     </div>
  13.     <script>
  14.       document.querySelector('button').onclick = function () {
  15.         console.log(this.tagName);
  16.       };
  17.       //根据事件冒泡机制，当上一级元素也有同名事件时，会自动触发
  18.       //button 父级 div
  19.       document.querySelector('div').onclick = function () {
  20.         console.log(this.tagName);
  21.       };
  22.       //div 父级 body
  23.       document.querySelector('body').onclick = function () {
  24.         console.log(this.tagName);
  25.       };
  26.       //body 父级 html
  27.       document.querySelector('html').onclick = function () {
  28.         console.log(this.tagName);
  29.       };
  30.     </script>
  31.   </body>
  32. </html>

2.事件委托

总结:

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件委托</title>
  8.   </head>
  9.   <body>
  10.     <ul>
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.     </ul>
  18.     <script>
  19.       //以下关于事件委托总结:
  20.       //1.基于事件委托原理，点击子元素，也会触发父元素
  21.       //2.点击子元素（如li），等同点击父元素(如ul)
  22.       //3.将事件绑定到父元素即可实现事件委托
  23.       //具体调用方法如下：
  24.       //   document.querySelector('ul').onclick = function (ev) {
  25.       //     console.log(ev.target.textContent);
  26.       //   };
  29.       //任务：点击<li>,显示出它的内容文本
  31.       //（一）传统方式
  32.       //   document.querySelectorAll('li').forEach((li) => {
  33.       //     // console.log(li.textContent);
  34.       //     li.onclick = () => {
  35.       //       console.log(li.textContent);
  36.       //     };
  37.       //   });
  38.       //（二）事件冒泡方法
  39.       //原理：li.onclick 必然会在 ul.onclick 上触发，只要在ul上写一个点击事件
  40.       document.querySelector('ul').onclick = function () {
  41.         // console.log(li.textContent);
  42.         // console.log(this)
  43.         // 事件委托中，不要用this
  44.         // this 不能用它来引用事件触发主体
  45.       };
  47.       //事件对象参数
  48.       //事件方法传参：要么传“事件对象”，要么就不要传参
  49.       document.querySelector('ul').onclick = function (ev) {
  50.         //ev：事件对象
  51.         //console.log(ev);
  53.         // 事件委托：事件主体不再是一个元素
  54.         // 事件主体：二部分组成
  55.         // 1.事件绑定“主体”：被添加了事件属性的元素，<ul>
  56.         // ev.currentTarge
  57.         // console.log(ev.currentTarget);
  58.         // 2. 事件“触发”主体：用户实际点击的元素，<li>
  59.         // ev.targe
  60.         // console.log(ev.target);
  61.         console.log(ev.target.textContent);
  63.         //事件主体再讲：绑定主体，触发主体是父子关系 或 祖孙关系
  64.         // 事件委托：事件主体一分为二
  65.       };
  66.     </script>
  67.   </body>
  68. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post