事件委托

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30344131

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pcd12321/p/5222592.html

本文深入探讨了JavaScript中事件委托的优势，通过实例展示了如何利用事件委托为`<ul>`元素添加事件处理程序，以及如何在不同的列表项上执行特定的操作，如改变文档标题、跳转链接或弹出提示信息。重点强调了事件委托在减少内存占用和简化代码方面的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title></title>
</head>
<body>
    <ul id="myLinks">
        <li id="goSomewhere">Go somewhere</li>
        <li id="doSomething">Do something</li>
        <li id="sayHi">Say hi</li>
    </ul>
    <script type="text/javascript">
    window.onload= function() {
        var list = document.getElementById("myLinks");
        addHandler(list, "click", function(ev) {
            var oEvent = ev||event;
            var target = getTarget(oEvent);
            switch(target.id) {
                case "doSomething":
                    document.title = "I changed the document's title";
                    break;
        
                case "goSomewhere":
                    location.href = "http://www.baidu.com";
                    break;
        
                case "sayHi":
                    alert("hi");
                    break;
            }
        })
    }
    function getTarget(event)
    {
        return event.target || event.srcElement;
    }
    function addHandler(element, type, handler)
    {
        if(element.addEventListener)
        {
            element.addEventListener(type, handler, false);//IE9、ff、sa、op、ch
        }else if (element.attachEvent)
        {
            element.attachEvent("on" + type, handler);//IE、op
        }else 
        {
            element["on" + type] = handle;
        }
    }
    </script>
</body>
</html>

　　事件委托的优点：只为<ul>元素添加事件处理程序，列表项为子节点，事件会冒泡，事件处理程序会执行，至取得了一个DOM元素，只添加了一个事件处理函数，结果相同但所占用的内存更少。

转载于:https://www.cnblogs.com/pcd12321/p/5222592.html