JS事件委托

Posted 2022-12-07 熬夜的小青年

tags:

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

前两天看了一篇文章讲到了事件委托，然后自己就查了一下，get到了一些知识！

首先感谢之前那篇文章的大佬。原文章位置，大佬写的非常透彻。令我茅塞顿开。（商业互捧ing）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style>
        * 
            margin: 0;
            padding: 0;
        

        ul
            list-style: none;
        

        .btn 
            width: 60px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #333333;
            cursor: pointer;
            padding: 6px 12px;
            margin: 20px 10px;
            text-align: center;
            line-height: 30px;
        
    </style>
</head>
<body>
<ul id="oUl">
    <li class="btn" id="add">添加</li>
    <li class="btn" id="remove">删除</li>
    <li class="btn" id="move">移动</li>
    <li class="btn" id="select">选择</li>
</ul>


<script>
    window.onload = function () 
        btnListener();
    

    function btnListener() 
        var oul = document.getElementById('oUl');

        oul.onclick = function (ev) 
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLocaleLowerCase() == 'li') 
                switch (target.id) 
                    case 'add':
                        console.log('我是add按钮');
                        break;
                    case 'remove':
                        console.log('我是remove按钮');
                        break;
                    case 'move':
                        console.log('我是move按钮');
                        break;
                    case 'select':
                        console.log('我是select按钮');
                        break;
                
            
        
    
</script>
</body>
</html>

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