JavaScript事件委托

最新推荐文章于 2024-09-09 09:35:48 发布

芳草柔柔

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量243

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/fangcaorourou/article/details/52025205

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现功能：分别点击重点内容三个列表项，触发各自的click事件。

使用事件委托方式实现：针对三个列表项，只需在DOM树中尽量最高的层次添加一个事件处理程序。这里就是对 ul 添加了click事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="EventUtil.js" ></script>
    </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">
    (function(){
        var list = document.getElementById("myLinks");
        EventUtil.addHandler(list,"click",function(event){
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            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;
                default:
                    break;
            }
        });
    })();
</script>
    </body>
</html>

按照传统做法会很复杂，需要针对每个列表项分别设置 click 事件。代码如下：

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});