문서를 사용하여 JavaScript의 모든 이벤트 처리

Question

문서 요소 아래의 모든 클릭 이벤트를 관리하는 것이 좋습니까? DOM은 끊임없이 조작되고 있으므로, 새로 생성 된 각 DOM 요소에 대해 지속적으로 새 이벤트를 등록하는 대신 문서 요소에 하나의 이벤트 핸들러를 할당 할 수는 없습니까? 예 :

document.onclick = function(event) { 
    switch(event.target.id) { 
    case 'someid': 
     // SOME ACTION 
     break; 
    case 'someotherid': 
     // SOME OTHER ACTION 
     break; 
    default: 
     // A CLICK WITH NO ACTION 
    } 
}; 

Answer 1

예. https://developer.mozilla.org/es/docs/Web/API/Element/matches

- - https://davidwalsh.name/element-matches-selector

Answer 2

이벤트 위임이라고이 패턴은, 당신은 또한 요소가 일치하는/matchesSelector의 API를 살펴

을해야 David Walsh

의 블로그에 great article을 찾을 수 있습니다 이렇게 할 수는 있지만 특정 요소에 이벤트를 바인딩하는 것만 큼 효율적이지는 않습니다. 어떤 경우에 언급되지 않은 장소에서 누군가가 클릭하면 귀하의 기능이 실행된다는 의미입니다. 그렇더라도 올바른 케이스를 찾을 때까지 케이스를 순차적으로 검색해야합니다.

ID를 키 입력 한 개체를 사용하는 것이 더 좋은 방법입니다.

var handlers = { 
    "someid": function(event) { // some action 
    }, 
    "someotherid": function(event) { // some other action 
    }, 
    ... 
} 

document.onclick = function(event) { 
    if (handlers[event.target.id]) { 
     handlers[event.target.id](event); 
    } else { 
     // default action 
    } 
} 

이것은 순차적 검색 문제를 해결하지만 누군가 언 바운드 요소를 클릭 할 때도 계속 실행됩니다. 클릭에 대해서는별로 문제가되지 않지만 거의 항상 발생하는 마우스 이동 이벤트에 대해 동일한 작업을한다고 상상해보십시오.

또한, 이것은 핸들러를 클래스에 바인딩하거나보다 복잡한 선택자로 쉽게 일반화하지 않습니다.

은 당신이하고있는 것은 당신이 쓸 때 jQuery를이 .on() 이벤트가 바인딩을 구현하는 방법과 유사합니다

셀렉터와 일치하는 요소가있을 때입니다 특별히 필요한 경우이 양식은 일반적에만 사용됩니다

$(document).on("click", "someSelector", handlerFunction); 

, 동적으로 생성 - 요소 변경에 따라 핸들러를 추가 및 제거하지 않고 핸들러를 한 번 정의 할 수 있습니다. 그러나 정적 요소에 대해, 우리는 일반적으로 선택된 요소 중 하나를 클릭 할 때만 핸들러를 실행하는 간단한

$("selector").on("click", handlerFunction); 

다음 브라우저가 필요하기 때문에주의해야합니다.