My Book

事件委托

顾名思义:事件委托就是利用冒泡原理,将事件加在父元素或祖元素上,触发执行效果

    var btn6 = document.getElementById("btn6");
    document.onclick = function(event){
        event = event || window.event;
        var target = event.target || event.srcElement;
        if(target == btn6){
            alert(btn5.value);
        }
    }

好处:1、提高JavaScript的性能,事件委托可以显著提高事件的处理速度,减少内存的占用

            <ul id="list">
                 <li id="item1" >item1</li>
                 <li id="item2" >item2</li>
                 <li id="item3" >item3</li>
            </ul>

            var item1 = document.getElementById("item1");
            var item2 = document.getElementById("item2");
            var item3 = document.getElementById("item3");

            document.addEventListener("click",function(event){
                 var target = event.target;
                 if(target == item1){
                    alert("hello item1");
                 }else if(target == item2){
                    alert("hello item2");
                 }else if(target == item3){
                    alert("hello item3");
                 }
            })

2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定

            <ul id="list">
              <li id="item1" >item1</li>
              <li id="item2" >item2</li>
              <li id="item3" >item3</li>
            </ul>

            var list = document.getElementById("list");
            document.addEventListener("click",function(event){
             var target = event.target;
             if(target.nodeName == "LI"){
             alert(target.innerHTML);
                }
            })
            var node=document.createElement("li");
            var textnode=document.createTextNode("item4");
            node.appendChild(textnode);
            list.appendChild(node);