zoukankan      html  css  js  c++  java
  • 事件委托

    <!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元素,只添加了一个事件处理函数,结果相同但所占用的内存更少。

  • 相关阅读:
    http协议之状态码
    HTTP协议入门基础
    CI框架使用(一)
    memcache常见现象(一)雪崩现象
    memcached分布式一致性哈希算法
    编译php扩展
    memcached--delete--replace--set--get--incr--decr--stats
    memcached--add使用
    php5.3之命名空间
    MySQL优化(一)
  • 原文地址:https://www.cnblogs.com/pcd12321/p/5222592.html
Copyright © 2011-2022 走看看