js事件委托

最新推荐文章于 2023-06-27 17:18:45 发布

Coding_Jia

最新推荐文章于 2023-06-27 17:18:45 发布

阅读量408

点赞数 1

分类专栏： javascript总结文章标签： javascript 前端 web前端事件委托

本文链接：https://blog.csdn.net/Coding_Jia/article/details/71105287

版权

javascript总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件委托的原理：就是利用事件冒泡，把事件添加到父级上，在触发执行效果。
事件委托有两个好处：
1、可以大大的提高页面性能。
2、动态添加的元素，还会有之前的事件。

demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script type="text/javascript">
    window.onload = function() {
        var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        var oInput = document.getElementById('input1');
        var iNow = 4;
        oUl.onmouseover = function(ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            //在鼠标滑过的事件，要做下判断，当滑过的是li的时候，才修改背景颜色，滑过的是ul的时候，不执行(使用nodeName进行标签名的判断)
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = 'red';

            }
        }
        oUl.onmouseout = function(ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = '';

            }
        }
        oInput.onclick = function () {
            iNow++;
            var  oLi = document.createElement('li');
            oLi.innerHTML = 111*iNow;
            oUl.appendChild(oLi);

        }
    }
    </script>
</head>

<body>
    <input type="button" value="添加" id="input1" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>

</html>

注意：在这里面会涉及到事件源，在event对象下，事件源就是不管在哪个事件中，只要你操作的那个元素就是事件源。
以下是事件源的兼容写法：
IE：window.event.srcElement 标准下：event.target。

Coding_Jia

关注

1
点赞
踩
0

收藏

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

事件委托的原理：就是利用事件冒泡，把事件添加到父级上，在触发执行效果。事件委托有两个好处： 1、可以大大的提高页面性能。 2、动态添加的元素，还会有之前的事件。demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件委托</title> <script type="text
复制链接

扫一扫