js事件委托（事件代理）

Posted 2022-05-28 chailug

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件委托（事件代理）相关的知识，希望对你有一定的参考价值。

事件委托
　　js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上，事件代理就是本来加载子元素身上的事件，加在其父元素身上，其问起产生了，那么多的子元素怎么区分事件本应该是哪个子元素的。答案就是event对象记录的事件源，他就是发生事件的子元素；
　　事件委托的好处？
　　1、效率高，比如不用for循环
　　2、js新生成的子元素也不用新其添加事件，程序逻辑比较方便

例子1. 页面有个ul包含着4个li，鼠标移动到li上，li背景变成粉色，移出，背景恢复原色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
    <ul id="demo">
        <li>1111111111</li>
        <li>22222222222</li>
        <li>333333333333</li>
        <li>44444444444444444444444</li>
    </ul>
    <button id="btn">新增li</button>
</body>

<script type="text/javascript">
    var oUl = document.getElementById(‘demo‘)
    oUl.onmouseover = function(ev) 
        var ev = ev|| window.event;
        var oLi = ev.srcElement|| ev.target
        console.log(ev)
        console.log(oLi)
        console.log(oLi.nodeName)
        if (oLi.nodeName.toLowerCase() == ‘li‘) 
                oLi.style.background = ‘pink‘
        
        
     
     oUl.onmouseout = function(ev) 
         var ev = ev || window.event;
         var oLi = ev.srcElement||ev.target
         if (oLi.nodeName.toLowerCase() == ‘li‘) 
                oLi.style.background = ‘‘
        
     
    var btn = document.getElementById(‘btn‘)
    btn.onclick=function()
        var newLi = document.createElement(‘li‘)
        newLi.innerHTML = new Date()
        oUl.appendChild(newLi)
    

</script>

</html>

以上是关于js事件委托（事件代理）的主要内容，如果未能解决你的问题，请参考以下文章