집 > 기사 > 웹 프론트엔드 > js 이벤트 바인딩과 이벤트 모니터링, 이벤트 위임 간의 내용에 대한 간략한 분석

js 이벤트 바인딩과 이벤트 모니터링, 이벤트 위임 간의 내용에 대한 간략한 분석

不言원래의: 2018-08-23 15:01:391455검색

이 기사의 내용은 js 이벤트 바인딩 및 이벤트 모니터링 및 이벤트 위임에 대한 간략한 분석입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 이벤트 바인딩
JavaScript가 사용자 작업에 응답하도록 하려면 먼저 이벤트 처리 기능을 DOM 요소에 바인딩해야 합니다. 소위 이벤트 처리 기능은 사용자 작업을 처리하는 기능입니다. 다른 작업은 다른 이름에 해당합니다.
이벤트 바인딩에는 일반적으로 사용되는 세 가지 방법이 있습니다.
(1) DOM에서 직접 이벤트 바인딩
DOM 요소에 onclick, onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeypress, onkeyup, 등.

<input type="button" value="click me" onclick="hello()"><script>
function hello(){
    alert("hello world!");
}
</script>

(2) JavaScript 코드의 바인딩 이벤트
JavaScript 코드(예: 스크립트 태그 내)의 이벤트 바인딩은 JavaScript 코드를 HTML 태그에서 분리하여 문서 구조를 명확하고 관리 및 개발하기 쉽게 만듭니다.

<input type="button" value="click me" id="btn"><script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

(3) 이벤트 수신을 사용하여 이벤트 바인딩
이벤트를 바인딩하는 또 다른 방법은 addEventListener() 또는 attachmentEvent()를 사용하여 이벤트 수신 기능을 바인딩하는 것입니다.
이벤트 모니터링
이벤트 모니터링과 관련하여 W3C 사양에서는 캡처 단계, 대상 단계, 버블링 단계의 세 가지 이벤트 단계를 정의합니다.
W3C 사양

element.addEventListener(event, function, useCapture)

event: (필수) 이벤트 이름, 모든 DOM 이벤트를 지원합니다.
function: (필수) 이벤트가 트리거될 때 실행될 함수를 지정합니다.
useCapture: (선택 사항) 이벤트가 캡처 단계에서 실행되는지 아니면 버블링 단계에서 실행되는지 지정합니다. 사실, 캡처. 거짓, 거품. 기본값은 거짓입니다.

<input type="button" value="click me" id="btn1"><script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>

IE 표준

element.attachEvent(event, function)

event: (필수) 이벤트 유형입니다. 예를 들어 onclick과 같이 "on"을 추가해야 합니다.
function: (필수) 이벤트가 트리거될 때 실행될 함수를 지정합니다.

<input type="button" value="click me" id="btn2"><script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>

이벤트 모니터링의 장점
1. 여러 이벤트를 묶을 수 있습니다.
일반 이벤트 바인딩은 마지막 바인딩된 이벤트만 실행합니다. 이벤트 리스너는 여러 기능을 실행할 수 있습니다.

<input type="button" value="click me" id="btn4"><script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

2. 해당

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

캡슐화된 이벤트 모니터링

<input type="button" value="click me" id="btn5">//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

을 바인딩 해제할 수 있습니다. 이벤트 캡처는 문서에서 이벤트를 트리거하는 노드까지의 프로세스, 즉 하향식 트리거를 의미합니다. 이벤트의 .
이벤트 버블링: 이벤트를 상향식으로 트리거하는 것입니다. 바인딩된 이벤트 메서드의 세 번째 매개변수는 이벤트 트리거 시퀀스가 이벤트 캡처인지 여부를 제어하는 것입니다. true, 이벤트 캡처, false, 이벤트 버블링. 기본값은 false입니다. 이는 이벤트가 버블링됨을 의미합니다.

<p id="parent">
　　<p id="child" class="child"></p>
</p>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

child事件被触发，child
parent事件被触发，parent

결론: 아이가 먼저이고 그다음이 부모입니다. 이벤트가 안쪽에서 바깥쪽으로 순서대로 발생하는 것을 이벤트 버블링이라고 합니다.
이제 세 번째 매개변수의 값을 true로 변경합니다.

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)parent事件被触发，parentchild事件被触发，child

결론: 먼저 부모, 그 다음 자식입니다. 이벤트가 발생하는 순서가 외부에서 내부로 바뀌는 것이 이벤트 캡쳐입니다.

이벤트 버블링 방지 및 기본 이벤트 방지:
event.stopPropagation() 메서드: 이벤트 버블링을 방지하고 이벤트가 문서로 확산되는 것을 방지하는 메서드이지만, 기본 이벤트는 계속 실행됩니다. 이 방법을 사용할 때 연결을 클릭하면 연결이 계속 열립니다.
event.preventDefault() 메소드: 기본 이벤트를 방지하기 위한 메소드입니다. 이 메소드를 호출하면 연결이 열리지 않지만 버블링이 발생하며 해당 버블링이 해당 이벤트의 상위 요소로 전달됩니다. 이전 레이어
return false : 이 방법은 이벤트 버블링을 방지하고 기본 이벤트를 방지합니다. 이 코드를 작성하면 연결이 열리지 않고 이벤트가 상위 요소로 전달되지 않습니다. false를 반환하는 것으로 이해하면 됩니다. event.stopPropagation()과 event.preventDefault()를 동시에 호출하는 것과 같습니다

2. 이벤트 위임
이벤트 위임은 이벤트를 추가하는 원리를 사용합니다. 실행 효과를 트리거하는 상위 요소 또는 상위 요소입니다.

<input type="button" value="click me" id="btn6">
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><script>
  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");
    }
})</script>

2. 요소 변경으로 인한 이벤트 바인딩 수정 없이 DOM 요소를 동적으로 추가합니다.

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>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);
</script>

js 이벤트 바인딩과 이벤트 모니터링, 이벤트 위임 간의 내용에 대한 간략한 분석

관련 기사