JavaScript事件委托

来源：互联网发布：阿里开发的数据库编辑：程序博客网时间：2024/05/29 11:54

实现功能：分别点击重点内容三个列表项，触发各自的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");});

0 0