收藏
批改状态：合格
老师批语：事件代理, 看上去很简单, 其实有很多坑的, 一定要知道它的前提是什么, 并且不要滥用.....
事件代理原理：
事件代理是根据事件冒泡：从事件的目标到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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
