집 > 기사 > 웹 프론트엔드 > JS 이벤트 위임이란 무엇입니까? JavaScript 이벤트 위임 소개

JS 이벤트 위임이란 무엇입니까? JavaScript 이벤트 위임 소개

不言원래의: 2018-08-15 17:31:184258검색

이 기사에서는 js 이벤트 위임이 무엇인지에 대한 내용을 제공합니다. js 이벤트 위임에 대한 소개는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JS 이벤트 위임이란 무엇인가요? 그에게 무슨 소용이 있나요? 직설적으로 말하면, js 이벤트 위임은 버블링 원리를 사용하여 요소에 추가되어야 하는 이벤트를 상위 요소에 위임함으로써 DOM 상호 작용을 줄이고 웹 페이지 최적화를 달성합니다.

    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() 转为小写
            */

이런 식으로 작성하면 li를 계속해서 탐색할 필요가 없으며 원하는 효과를 얻기 위해 ul에서 DOM을 한 번만 실행할 수 있습니다. 그렇다면 버블링이란 무엇이며 왜 할 수 있습니까?
버블링 이벤트는 문서가 이벤트를 트리거한 노드에 도달하고 이벤트 소스까지 계층별로 캡처된 다음 계층별로 버블링되는 것을 의미합니다. 이것은 이벤트 버블링입니다. DOM 작업을 줄이기 위해 이 버블링 메커니즘을 사용합니다. 한 가지 주의할 점은 onclick이 이벤트 캡처를 지원하지 않는다는 것입니다. 다음과 같은 다른 쓰기 방법이 있습니다.

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

이 쓰기 방법을 DOM 레벨 2 이벤트 처리라고도 합니다.

이벤트 리스너 추가: addEventListener(이벤트 이름, 핸들러 함수, 부울 값)
이벤트 리스너 제거: RemoveEventListener(이벤트 이름, 핸들러 함수)

참고: 이벤트 이름에는 on이 포함되지 않습니다.
첫 번째 값은 이벤트 이름, 두 번째는 처리 함수, 세 번째 부울 값은 기본값이 false이고 버블링 단계에서 이벤트 핸들러가 실행됩니다. true로 변경되면 캡처에서 이벤트 핸들러가 실행됩니다. 단계. 이 두 이벤트는 동일하지만 IE에서는 이 두 속성이 지원되지 않습니다.
IE의 이벤트 리스너: attachmentEvent(이벤트 이름, 처리 함수), detachEvent(이벤트 이름, 처리 함수)
참고: 이벤트 이름 가져오기 .

이벤트가 버블링되면 조직이 버블링을 방지하는 것은 이벤트가 계층별로 위로 발생하는 것을 방지하는 것입니다. 다음 방법을 사용하면 이벤트가 발생하는 것을 방지할 수 있습니다.

return false ;
preventDefault();
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: 이벤트 위임이 사용되지 않으면 노드를 추가할 때 DOM 이벤트를 얻을 수 없습니다. 이벤트 위임으로 해결할 수 있습니다

JS 이벤트 위임이란 무엇입니까? JavaScript 이벤트 위임 소개

관련 기사