事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="item">按钮</li> <li class="item">按钮</li> <li class="item">按钮</li> <li class="item">按钮</li> </ul> </body> <script> // 不使用事件委托,那就要遍历每一个li元素,给每个li元素绑定一个点击事件, //这样的做法非常耗费内存,如果有100个、1000个li元素,那对性能的影响是非常大的。 window.onload = function () { let lis = document.getElementsByClassName('item') for (let i = 0; i < lis.length; i++) { lis[i].onclick = function () { console.log('用力的点我') } } } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="wrap"> <li class="item">按钮</li> <li class="item">按钮</li> <li class="item">按钮</li> <li class="item">按钮</li> </ul> </body> <script> window.onload = function () { let ul = document.getElementById('wrap') ul.onclick = function (ev) { // 获取到事件对象 let e = ev || window.event console.log(ev, window.event); // 如果点击的元素的calssName为item if (e.target.className === 'item') { console.log('用力的点我') } } } </script> </html>