[JavaScript知识库] JavaScript事件委托

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript事件委托 -> 正文阅读

[JavaScript知识库]JavaScript事件委托

事件委托是什么

我的理解：事件委托就是当有很多个儿子辈的时候，利用JavaScript中的冒泡机制（不懂就看下面的参考资料），在父节点上处理子节点触发的事件，而不是直接在儿子元素中写事件。
如果看不懂，可以看下面的参考资料，他们讲的挺好的。

事件委托封装成函数

/**
 * @author kjprime
 * @param {object} obj 对象
 * @description 事件委托的封针
 */
function eventDelegation(obj){
    if(obj.dom.addEventListener){   // 浏览器兼容
        obj.dom.addEventListener(obj.event, fun) 
    }else{
        obj.attachEvent("on" + obj.event, fun) // 兼容IE
    }
    function fun(e){
        e = window.event
        window.event = e
        e.target = e.target || e.srcElement // .srcElement老版本的IE浏览器
        e.srcElement = e.target
        if(this == e.target) return
        obj.res(e = e)
    }
}

利用上述函数的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        li{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="div">
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>
    <script>
        let ul = document.getElementById("ul")
        let t = {
            dom: ul, 
            event: "click",
            res: function(e){ 
                console.log(e)
                e.target.innerHTML = "点击了我"
            },
        }
        
        function eventDelegation(obj){
            if(obj.dom.addEventListener){
                obj.dom.addEventListener(obj.event, fun)
            }else{
                obj.attachEvent("on" + obj.event, fun)
            }
            function fun(e){
                e = window.event
                window.event = e
                e.target = e.target || e.srcElement
                e.srcElement = e.target
                if(this == e.target) return
                obj.res(e = e)
            }
        }
        eventDelegation(t)
    </script>
</html>