js-事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

嫌疑-人

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量174

点赞数 1

分类专栏： javaScript 文章标签：事件绑定 JavaScript 事件源对象

本文链接：https://blog.csdn.net/qq_39396275/article/details/82017825

版权

javaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

事件对象

在事件函数中传入一个参数，系统会将信息传入到该事件对象中.
function（e）

var event = e || window.event;
//e 不兼容IE
//window.event 兼容IE

事件源对象

能绕过事件冒泡直接找到事件源：
- event.target 火狐
- event.srcElement IE
- Chrome 二者都有

事件委托

含义：利用事件冒泡，和事件源对象进行处理

给每个li列表，添加点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>       
</body>
<script>

    var li = document.getElementsByTagName('li');
    var len = li.length;
    for(var i = 0;i < len; i++){
        li[i].onclick = function(){
            console.log(this.innerText);
        }
    }
</script>
</html>

现在需要再加上100个li列表，并添加上相似的点击事件，怎么做？
需要再给100个li绑定事件并一个个执行，耗费性能

事件委托解决思路：
ul 包含了所有的li ，通过事件冒泡可知，点击li 都会冒泡到ul的绑定事件，所以只给ul 添加点击事件，并且通过获得事件源对象，来打印出具体的li 的列表值。

代码如下：

<script>

    var ul = document.getElementsByTagName('ul')[0];
    var len = ul.length;
    ul.onClick = function(e){
        var event = e || window.event;
        var target = event.target || event.srcElement;
        console.log(target.innerText);
    }
    </script>

事件委托的优点：
1.性能：不需要循环所有的元素一个个绑定事件
2.灵活：当有新的子元素时，不需要重新绑定事件

嫌疑-人

关注

1
点赞
踩
0

收藏

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

事件对象在事件函数中传入一个参数，系统会将信息传入到该事件对象中. function（e）var event = e || window.event;//e 不兼容IE//window.event 兼容IE事件源对象能绕过事件冒泡直接找到事件源： - event.target 火狐 - event.srcElement IE - Chrome 二者都有...
复制链接

扫一扫

专栏目录