JS事件委托应用场景
Posted 叶子玉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件委托应用场景相关的知识，希望对你有一定的参考价值。
给列表元素添加点击事件：
在javascript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。
<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。
有一种优雅的方法，就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <ul id="container"> 12 <li>1</li> 13 <li>2</li> 14 <li>3</li> 15 <li>4</li> 16 <li>5</li> 17 </ul> 18 19 <body> 20 <script> 21 document.getElementById(‘container‘).addEventListener(‘click‘, function (event) { 22 var target = event.target; 23 console.log(event) 24 if (target.tagName == ‘LI‘) { 25 alert(target.innerText); 26 } 27 },false); 28 </script> 29 </body> 30 31 </html>
以上是关于JS事件委托应用场景的主要内容，如果未能解决你的问题，请参考以下文章
对“xxx”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃损坏和数据丢失。向非托管代码传递委托时，托管应用程序必须让这些委托保持活动状态，直到确信不会再次调用它们。 错误解决一例。(代码片段