简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 事件添加与事件代理的实现原理
Blogger Information
Blog 18
fans 1
comment 0
visits 17190
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
事件添加与事件代理的实现原理
α清尘
Original
738 people have browsed it

事件的添加方式

事件添加方式，事件监听；

相关知识整理：

  • ev：事件对象；
  • ev.target: 表示当前按钮，表示事件触发者；
  • 事件监听的语法：addEventListener(事件名称，回调方法，传递机制/捕获/冒泡);false是冒泡阶段，ture是捕获阶段；
  • setInterval()设置定时器；
  • dispatchEvent() 分配事件，事件派出器，自动执行某个操作；

实例演示：

  1. <body>
  2.     <button onclick="show(this)">按钮1</button>
  3.     <button>按钮2</button>
  4.     <button>按钮3</button>
  5.     <button>按钮4</button>
  6.     <button>按钮5</button>
  8.     <script>
  9.         function show(ele){
  10.             console.log(ele.innerHTML)
  11.         }
  12.         // ev.target表示当前按钮，表示事件触发者；
  13.         const b=document.querySelector("button:nth-of-type(2)")
  14.         b.onclick=(ev)=>console.log(ev.target,"您点击了按钮2")
  16.         // 事件监听
  17.         // addEventListener(事件名称，回调方法，传递机制/捕获/冒泡)
  18.         const d3=document.querySelector("button:nth-of-type(3)")
  19.         d3.addEventListener("click",(ev)=>console.log("点击了按钮3"),false)
  20.         const last=document.querySelector("button:last-of-type")
  21.         last.addEventListener("click",(ev)=>console.log("您点击了最后一个"),false)
  22.         const ev=new Event("click");
  23.         setInterval(()=>last.dispatchEvent(ev),1000)
  24.         // setInterval()设置定时器
  25.     </script>
  26. </body>

事件代理的实现原理

事件代理也叫事件委托；
事件代理本质上就是将应该在子元素触发的事件，委托给父元素来执行，可以极大的简化代码和业务逻辑；
原理：：利用冒泡原理，把事件添加到父级，触发执行结果；
true：表示捕获阶段；false：表示冒泡阶段；
捕获是由外向内执行的，而冒泡是由外向内执行的；
根据冒泡原理，子元素的同名事件会冒泡到父元素的同名事件上，所有可以直接将事件添加到他的父元素上；

实例演示：

  1.     <ul>
  2.         <li>item1</li>
  3.         <li>item2</li>
  4.         <li>item3</li>
  5.         <li>item4</li>
  6.         <li>item5</li>
  7.     </ul>
  8.     <script>
  9.         document.querySelectorAll("li")
  10.         .forEach((item)=>item.addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false));
  11.         document.querySelector("ul")
  12.         .addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false);
  13.     </script>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！