JavaScript 이벤트 리스너 대 이벤트 처리기

Question

좋아, 나는 지금 이것을 오랫동안 알아 내려고 노력했고 마침내 조사 할 시간을 갖고있다. 제목이 "차이점은 무엇입니까"라고 제안한 바와 같이? 나는 이것이 내가 원하는 방식으로 작동한다는 것을 안다.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

그러나 이것은 그렇지 않으며 한 번만 실행됩니다.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

내가 부족한 것 ... 차이점은 무엇입니까? 주제에 대한 모든 링크는 도움이됩니다.

내 가정은 핸들러가 청취자처럼 행동해야한다고 생각했지만 그렇지 않습니다. 실제로 청취자는 AddLoadevent 함수에 추가되어야합니까?

Answer 1

addEventListener 추가합니다 이벤트 핸들러 기능. 이런 식으로 무제한의 이벤트 핸들러가있을 수 있습니다.

환경 onxxxxx 세트 이벤트 처리기 하나의 기능.

로부터 모질라 개발자 센트럴:

AddeventListener는 단일 대상에 단일 이벤트 리스너를 등록합니다. 이벤트 대상은 문서, 문서 자체, 창 또는 xmlhttprequest의 단일 노드 일 수 있습니다.

대상에 대해 둘 이상의 이벤트 리스너를 등록하려면 동일한 대상이지만 다른 이벤트 유형 또는 캡처 매개 변수로 addeventListener를 호출하십시오.

그리고 봐라 같은 문서 의이 장 오래된 것의 비교를 위해 onxxxx 방법.

Answer 2

ECMA 스크립트는 핵심이 매우 유연하기 때문에 함수, 메소드 ... 사실상 모든 것 ... 변수에 함수를 할당 할 수 있으므로 "addeventListener"와 같은 변수에 함수를 첨부하는 추가 기능을 갖는 것은 내 모든 디자인을 의미합니다. .

그래서 당신이 저에게 묻는다면, 나는 당신에게 Pekka가 말한 모든 것을 말해 줄 것입니다.

pixels.onkeydown = updateNode;

ECMA Script Language Natural 문입니다.

pixels.addEventListener("keydown", updateNode, true);

불필요한 DOM 보충 자료는 많은 개발자가 혼란스러워서 첫 번째 방법으로 한 번 설정하면 어떤 일이 일어날 지 생각하고 나중에 다른 스크립트는 잠재적으로 다른 방식으로 설정할 수 있습니다 :)