JavaScript 이벤트 학습 5장 고급 이벤트 등록 Model_javascript 기술

W3C와 Microsoft는 모두 Netscape의 기존 모델을 대체할 자체 이벤트 등록 모델을 개발하는 데 주력하고 있습니다. 나는 Microsoft 모델을 별로 좋아하지 않지만 마우스 위치 문제를 제외하면 w3c는 여전히 좋습니다. 그러나 현재는 소수의 브라우저에서만 지원됩니다.
W3C
W3C의 DOM 레벨 이벤트 사양은 기존 모델의 문제점에 주목합니다. 여러 이벤트를 요소에 바인딩하려는 경우 좋은 솔루션을 제공합니다.
W3C 이벤트 등록 모델의 핵심은 addEventListener()입니다. 그에게 이벤트 유형, 실행할 함수, 부울 값(true 또는 false)이라는 세 가지 매개변수를 제공합니다. 이에 대해서는 잠시 후에 설명하겠습니다. 잘 알려진 doSomething() 함수를 요소의 onclick 이벤트에 등록하려면 다음을 수행하면 됩니다.
element.addEventListener('click',doSomething,false)
이 모델의 매력은 다음과 같이 할 수 있다는 것입니다. add 원하는 만큼 모니터를 추가할 수 있습니다. 기존 모드에서 이전 예제를 사용하는 경우 다음과 같이 작성할 수 있습니다.
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
사용자가 요소를 클릭하면 두 이벤트 핸들러가 모두 실행됩니다. W3C 표준에서는 어떤 이벤트가 먼저 실행되는지 결정할 수 없습니다. 따라서 startDragDrop()이 spyOnUser() 직전에 실행된다고 생각할 수 없습니다.
이벤트 핸들러를 제거하는 방법도 매우 간단합니다. 단지 RemoveEventListener()를 사용하면 됩니다. 따라서:
element.removeEventListener('click',spyOnUser,false)
두 번째 이벤트 핸들러는 제거되지만 첫 번째 이벤트 핸들러는 변경되지 않습니다. 기존 모드의 문제를 완전히 해결하는 매우 아름다운 프로그램입니다.

익명 함수
W3C 모드에서도 익명 함수를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

element.addEventListener('click',function () {
this.style.BackgroundColor = '#cc0000'
},false)

true 또는 false
true 또는 false는 addEventListener의 마지막 매개변수입니다. 이는 캡처 단계 또는 버블링 단계에서 함수가 실행되기를 원한다는 의미입니다. 확실하지 않은 경우 false(버블링 단계)를 사용하세요.
this
JavaScript에서 this 키워드는 일반적으로 함수의 소유자를 나타냅니다. 이것이 이벤트가 발생한 HTML 요소를 가리키면 모든 것이 정상이며 많은 일을 쉽게 할 수 있습니다.
안타깝게도 이 기능은 매우 강력하지만 정확히 어떻게 작동하는지 모르면 사용하기 어렵습니다. 이에 대해서는 다른 곳에서 자세히 논의합니다.
w3c 모델에서의 작동은 기존 모드와 동일합니다. 즉, 현재 이벤트를 처리하고 있는 HTML 요소를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

element.addEventListener('click',doSomething ,false) ;
another_element.addEventListener('click',doSomething,false);
function doSomething() {
this.style.BackgroundColor = '#cc0000'


HTML 요소의 클릭 연습에 doSomething()을 등록하면 사용자가 클릭할 때 이 요소의 배경이 빨간색으로 변합니다.

어떤 이벤트 핸들러가 등록되어 있나요?
현재 W3C 이벤트 등록 모델의 한 가지 문제점은 요소에 어떤 이벤트 핸들러가 등록되어 있는지 알 수 없다는 것입니다. 기존 모드에서는 다음을 수행할 수 있습니다.
alert(element.onclick)
등록된 기능을 확인할 수 있습니다. 정의되지 않음은 이 이벤트에 등록된 기능이 없음을 의미합니다. 최근 DOM 레벨 3 이벤트에서만 W3C는 등록된 이벤트 핸들러를 저장하기 위해 eventListenerList를 추가했습니다. 너무 새롭기 때문에 지원하는 브라우저가 거의 없습니다. 그러나 문제가 해결되었습니다.
다행히 해당 요소에 대한 이벤트를 등록하지 않았기 때문에 RemoveEventListener()는 오류를 반환하지 않으므로 걱정하지 않고 RemoveEventLister()를 사용할 수 있습니다.
Microsoft
Microsoft에도 이벤트 등록 모델이 있습니다. W3C와 매우 유사하지만 심각한 결함이 있습니다.
요소에 연결할 이벤트 핸들러 등록:
element.attachEvent('onclick',doSomething)
또는 두 개의 이벤트 핸들러가 필요합니다:
element.attachEvent('onclick' ,startDragDrop)
element.attachEvent('onclick',spyOnUser)
제거하는 것도 매우 간단합니다.
element.detachEvent('onclick',spyOnUser)

결함
W3C와 비교 , Microsoft에는 두 가지 심각한 문제가 있습니다.
, 이벤트가 항상 버블링되고 캡처될 가능성이 없습니다.
이벤트 핸들러는 복사되지 않고 참조되므로 this 키워드는 항상 창을 가리키며 전혀 쓸모가 없습니다.
이 두 가지 문제로 인해 이벤트가 발생하면 어떤 요소가 해당 이벤트를 처리하는지 알 수 없게 됩니다. 사건의 순서에 대해서는 뒷장에서 자세히 설명하겠습니다.
그리고 Microsoft의 표준은 IE에서만 지원되며 여러 브라우저에서 사용할 수 없습니다. 단지 Windows 브라우저용 스크립트를 작성하는 경우에도 이를 사용하지 않는 것이 가장 좋습니다. 버블 문제로 인해 문제가 발생하기 때문입니다.
계속
계속 학습하고 싶다면 다음 장을 읽어주세요.
원본 주소: http://www.quirksmode.org/js/events_advanced.html
첫 번째 번역은 저를 포함해 주세요. @rehawk.