What is js event delegation? Introduction to JavaScript event delegation

This article brings you what is js event delegation? The introduction to js event delegation has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is js event delegation? What good does he have? To put it bluntly, js event delegation uses the principle of bubbling to delegate events that should be added to an element to its parent, thereby reducing DOM interaction and achieving web page optimization.

    var oUl = document.getElementById("newsList");    
    //获取ul
    oUl.onclick = function(e){
                //只有点击li时才会触发相应代码执行
                var evt = e || event;                
                var _target = evt.target || evt.srcElement; 
                if(_target.nodeName.toUpperCase() == "LI"){     
                    console.log(_target.innerHTML);         
                }
            }            
            /*nodeName 属性可依据节点的类型返回其名称。
            如果节点是一个元素节点 , nodeName 属性将返回标签名。
            如果节点是一个属性节点， nodeName 属性将返回属性名。
            其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
             toUpperCase() 转为小写
            */

If you write it this way, you don’t need to traverse li again and again. You can only execute the DOM once on ul to achieve the desired effect. So what is bubbling and why can it be done?
The bubbling event is to capture the document from the node that triggered the event layer by layer down to the event source and then bubble up layer by layer. This is event bubbling. Use this bubbling mechanism to reduce DOM operations. One thing to note is that onclick does not support capturing events. There are other writing methods as follows:

oBox.addEventListener("click",function(){
                console.log("click");
            },false);

This writing method is also called DOM level 2 event processing.

• Add event listener: addEventListener(event name, handler function, Boolean value)

• Remove event listener: removeEventListener(event name , processing function)

  Note: The event name does not contain on.
  The first value is the event name, the second is the processing function, and the third Boolean value is false by default. The event handler is executed in the bubbling phase. When it is changed to true, the event handler is executed in the capture phase. These two events are the same, but these two attributes are not supported in IE.

• Event listener under IE: attachEvent (event name, processing function), detachEvent (event name, Processing function)
  Note: The event name contains on.
  

When events bubble up, organizations bubble up. To prevent bubbling is to prevent events from being triggered upward layer by layer. The following methods can prevent events from bubbling up.

1. return false ;

2. preventDefault();

3. window.event.cancelBubble = true ;

//兼容火狐 获取event方法function getEvent(){
    if(window.event){return window.event;}
    func = getEvent.caller;    while(func != null){        
    var arg0 = func.arguments[0];        
    if(arg0){            
    if((arg0.constructor == Event || arg0.constructor == MouseEvent
                || arg0.constructor == KeyboardEvent)
                || (typeof(arg0) == "object" && arg0.preventDefault
                && arg0.stopPropagation)){                
                return arg0;
            }
        }
        func = func.caller;
    }    return null;
}//阻止冒泡到下一个事件function stopPropagations(){
    var ev = getEvent();    if (window.event) {
        ev.cancelBubble = true;
    }else if(ev.preventDefault){
        ev.stopPropagation();//阻止冒泡
    }
}

ps: If event delegation is not used, DOM events cannot be obtained when adding nodes to the page. This can be solved by using event delegation.

Related recommendations:

Event delegation in js

Detailed explanation of JavaScript implementation of event delegation method

The above is the detailed content of What is js event delegation? Introduction to JavaScript event delegation. For more information, please follow other related articles on the PHP Chinese website!