JavaScript-事件委托

最新推荐文章于 2024-04-19 12:22:52 发布

della_uii

最新推荐文章于 2024-04-19 12:22:52 发布

阅读量235

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/Della_UI/article/details/52927075

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

事件委托（事件代理）：利用冒泡的原理，把事件添加到父级甚至祖先级上，触发执行。
事件代理的好处：
1.提高性能；
2.动态添加的元素依然有之前的事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" id="input1" value="点击添加" />
        <ul id="ul1">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
        <script type="text/javascript">
            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;  //处理兼容性，找到事件源

                if (target.nodeName.toLowerCase()=='li') {  //只为li节点添加事件
                    target.style.backgroundColor='yellow';
                }

            }

            oUl.onmouseout=function(ev){
                var ev = ev || window.event;
                var target= ev.target || ev.srcElement;

                if (target.nodeName.toLowerCase()=='li') {
                    target.style.backgroundColor='';
                }

            }

            oInput.onclick=function(){  //动态添加元素，动态添加的元素依然有onmouseover和onmouseout事件。
                iNow++;
                var oLi=document.createElement('li');
                oLi.innerHTML=111*iNow;
                oUl.appendChild(oLi);
            }
        </script>
    </body>
</html>

della_uii

关注

0
点赞
踩
0

收藏

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

事件委托（事件代理）：利用冒泡的原理，把事件添加到父级甚至祖先级上，触发执行。事件代理的好处： 1.提高性能； 2.动态添加的元素依然有之前的事件。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <
复制链接

扫一扫