码迷,mamicode.com
首页 > Web开发 > 详细

JS事件(五)事件委托

时间:2016-08-10 21:08:27      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

<ul id="ul">
    <li id="goSomewhere">goSomewhere</li>
    <li id="doSomething">doSomething</li>
    <li id="sayHi">sayHi</li>
</ul>

<script>
var ul=document.getElementById("ul");

EventUtil.addHandler(ul,"click",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    switch(target.id) {
    case "goSomewhere":
        location.href="https://www.baidu.com";
        break;
    case "doSomething":
        document.title="I changed the title";
        break;
    case "sayHi":
        alert("hi");
        break;
    }
});
</script>

核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能

利用event属性找到事件源,将事件定位到具体元素上

JS事件(五)事件委托

标签:

原文地址:http://www.cnblogs.com/dll-ft/p/5758157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!