什么时候使用事件代理，事件委托机制实现

最新推荐文章于 2024-04-08 14:30:00 发布

全栈工程师继续努力

最新推荐文章于 2024-04-08 14:30:00 发布

阅读量858

点赞数

分类专栏： nodejs html js jquery android 兼容性浏览器原理文章标签： js html5 javascript 事件委托机制

本文链接：https://blog.csdn.net/qq_16664643/article/details/52245055

版权

js 同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

html

50 篇文章 0 订阅

订阅专栏

jquery

43 篇文章 0 订阅

订阅专栏

一.事件分为三个阶段；

1.事件捕获；

2.目标阶段；

3.事件冒泡阶段。

首先解释下第三阶段；第三阶段并不是触发就立即停止，而是由目标元素向上一层一层冒泡。所以我们可以利用这个特性，处理工作中很多问题。

先看一个实例教大家为什么要用事件委托

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.οnlοad=function(){
var oul=document.getElementById("oul");
/*console.log(oul);//在控制台打印有ul树表明获取成功。
var oli=oul.getElementsByTagName("li");
console.log(oli);
for(var i=0;i<oli.length;i++){
oli[i].addEventListener('click',function(e){
alert(e.target.innerHTML);
});
}*/
//事件委托机制
oul.addEventListener('click',function(e){
console.log(oul);
if(e.target&&e.target.nodeName.toUpperCase()=="LI"){
alert(e.target.innerHTML);
}
},false);
}
//当ul里面的li元素频繁更改的时候我们就要用到事件代理解决这个问题。下面我们用事件委托机制作

</script>
</head>
<body>
<ul id="oul">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
</body>
</html>

全栈工程师继续努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么时候使用事件代理，事件委托机制实现

一.事件分为三个阶段；1.事件捕获；2.目标阶段；3.事件冒泡阶段。首先解释下第三阶段；第三阶段并不是触发就立即停止，而是由目标元素向上一层一层冒泡。所以我们可以利用这个特性，处理工作中很多问题。先看一个实例教大家为什么要用事件委托
复制链接

扫一扫

专栏目录