事件委托

最新推荐文章于 2024-08-12 09:24:46 发布

Ada-

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量72

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45870322/article/details/104878684

版权

事件委托

子元素的事件交给父元素去处理

语法

 事件对象.target （精准的事件源）

在低版本Ie的语法：

事件对象.srcElement

兼容写法：

 var target = e.target || e.srcElement;//e为事件对象

事件委托的好处：
1.提高性能，因为给子元素事件要绑定多次，事件委托，只需要绑定一次
2.动态添加的子元素也会具有事件
点击btn添加一个li的案例

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li><b>3</b></li>
</ul>
<button id="btn">按钮</button>
</body>
<script type="text/javascript">
var lis = document.querySelectorAll("li");
var ul = document.querySelector("ul");
var btn = document.querySelector("#btn");
btn.onclick=function(){
    var li = document.createElement("li");
    var length = lis.length;
    length++;
    li.innerText = length;
    ul.appendChild(li);
}
ul.onclick=function(e){
 // 在父元素的事件中，通过事件对象判断，判断是否准确点击到了子元素，再处理子元素点击的事情
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName == "B"){
        console.log(e.target.innerText);
    }
}
// 事件冒泡的原理：点击子元素其实父元素的事件会在冒泡阶段执行
</script>

Ada-

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托

事件委托子元素的事件交给父元素去处理语法事件对象.target （精准的事件源）在低版本Ie的语法：事件对象.srcElement兼容写法： var target = e.target || e.srcElement;//e为事件对象事件委托的好处：1.提高性能，因为给子元素事件要绑定多次，事件委托，只需要绑定一次2.动态添加的子元素也会具有事件点击bt...
复制链接

扫一扫