事件代理原理:
事件代理是根据事件冒泡:从事件的目标到HTML文档的层级触发原理思路进行编写。
关键字:
currentTaget:事件添加者
target:事件触发者
以下是事件代理小例子: 执行触发顺序 ul事件->body事件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件代理</title> </head> <body> <ul> <li>aa</li> <li>bb</li> <li>cc</li> <span>dd</span> </ul> <script> var ul = document.getElementsByTagName('ul').item(0);//获取UL元素 var bby = document.getElementsByTagName('body').item(0);//获取body元素 // console.log(bby); ul.addEventListener('click',list,false); function list(ev){ console.log(ev.currentTarget);//事件添加者 console.log(ev.target);//事件触发者 } bby.addEventListener('click',tenm,false); function tenm(){ alert('我是body'); } </script> </body> </html>
运行实例 »