js use event delegation

What event delegate is it? In the actual event delegate in writing code, what advantage?

Principle event delegate that event bubbling , the most important function is to improve process efficiency.

What event bubbling is it?

One is the flow of events is divided into two bubbling event is another event capture.

Event bubbling : Before you begin from a child node, from the inside out step by step the trigger until you find the root node.
Event Capture : starting from the root to perform, from outside to inside progressively trigger until you find the current target node.

Event bubbling small case

html code portion, and adding a little default styles

        <div id = 'div1' style="height: 400px; width: 400px; padding: 30px; background-color: red;">
            爷爷节点
            <div id = 'div2' style="height: 300px; width: 300px; padding: 30px; background-color: green;">
                父节点
                <div id = 'div3' style="height: 200px; width: 200px; padding: 30px; background-color: yellow;">
                    子节点
                </div>
            </div>
        </div>

Page rendering

js code section

            window.onload = function(){
                // 获取到所有DIV节点
                var aDivs = document.getElementsByTagName("div");
                
                // 通过循环给所有div添加点击事件，让其输出自身的id名
                for(var i = 0; i < aDivs.length; i++){
                    aDivs[i].onclick = function(){
                        console.log(this.id);
                    }
                }
            }

Click on a page that is only div3 effect of child nodes

Summary: When you click on div3 when he was not only the output of his own id, but also carried out step by step id id bubbling, the output of its parent, grandfather nodes up, this is the event bubble.

Principles have figured it out, so why should the event delegate it?

Usually we do not have to add dynamic node has been added in front of a good event, if you want to let him have the same event before, still need to add it again, but if you use event delegation, then the node will have added dynamically before event.

How to achieve the event delegate?

The parent node 1, first find the need to add a node behavior of the parent or parent.
2, to bind the event you need to add to the parent node
3, get to trigger the object to determine whether to meet the requirements, if it is the follow-up operating

Let us look at the case studies commissioned by use js events

html code portion

		<button id="btn1">添加内容</button>
        <ul id="ul1">
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是原内容</span>
                <button>删除</button>
            </li>
        </ul>

The default results page

JS code section

            window.onload = function(){
                var oUl = document.getElementById("ul1");
                var oBtn = document.getElementById("btn1");

                // 按钮点击事件 添加内容
                oBtn.onclick = function(){
                    var newLi = document.createElement("li");
                    var newSpan = document.createElement("span");
                    var newBtn = document.createElement("button");
                    // 将新建内容添加到页面
                    newSpan.innerText = "我是新建的内容";
                    newBtn.innerHTML = "删除";
                    newLi.appendChild(newSpan);
                    newLi.appendChild(newBtn);
                    oUl.appendChild(newLi); 
                }
                // 事件委托ul 点击button子节点时 删除当前列表内容
                oUl.onclick = function(ev){
                    var e = ev || window.event;  //获取点击对象 IE浏览器兼容
                    var target = e.target || window.event.srcElement; //触发对象 IE浏览器兼容

                    // 判断点击的子节点是否为button
                    if(target.tagName == "BUTTON" && target.innerHTML == "删除"){
                        // 如果是 就删除这个节点
                        oUl.removeChild(target.parentNode);
                    }
                }
            }

After the effect of adding nodes by clicking on the event, and dynamically add nodes have a click event

In js code, the use of e.target trigger object implements the event delegates, so even if the dynamic node is added to the event will have the same content as before add.

If the article to you a little help, please give praise ~ next point bloggers

bloggers article will be updated regularly, hoping to make progress together with you!