JavaScript的事件委托及好处

最新推荐文章于 2022-07-20 14:17:42 发布

凉川望远

最新推荐文章于 2022-07-20 14:17:42 发布

阅读量644

点赞数

本文链接：https://blog.csdn.net/qq_24193261/article/details/52594013

版权

1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

1，提高性能。

2，新添加的元素还会有之前的事件。

例子：

<!DOCTYPE >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=1200" />
<script type="text/javascript">
window.οnlοad=function(){
    var oul=document.getElementById("ul");
    var ali=oul.getElementsByTagName("li");
    var obtn=document.getElementById("btn");
    var inow=4;
    oul.οnmοuseοver=function(ev){
        var ev=ev||window.event;
        var target=ev.target||ev.srcElement;
        if(target.nodeName.toLowerCase()=="li"){
            target.style.background="red";
        }
    }
    oul.οnmοuseοut=function(ev){
        var ev=ev||window.event;
        var target=ev.target||ev.srcElement;
        if(target.nodeName.toLowerCase()=="li"){
            target.style.background='';
        }
    }
    obtn.οnclick=function(){
        inow ++;
        var oli=document.createElement("li");
        oli.innerHTML=1*inow;
        oul.appendChild(oli);
    }
}

</script>
</head>
<body>
    <input type="button" id="btn" />
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
</body>

凉川望远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的事件委托及好处

1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。1，提高性能。2，新添加的元素还会有之前的事件。例子： window.onloa
复制链接

扫一扫