JavaScript 이벤트 학습 4장 전통 이벤트 등록 Model_javascript 기술

가장 오래된 JavaScript 브라우저에 이벤트를 등록하는 것은 인라인 모드를 통해서만 가능합니다. DHTML은 페이지 조작 방식을 근본적으로 변경하므로 이벤트 등록은 확장 가능하고 적응성이 높아야 합니다. 따라서 해당 이벤트 모델이 있어야 합니다. 넷스케이프는 3세대 브라우저에서 시작됐고, IE는 4세대 브라우저에서 시작됐다.
Netscape 3는 이 새로운 이벤트 등록 모델을 지원하기 시작했기 때문에 브라우저 전쟁 이전에는 사실상 표준이었습니다. 따라서 Microsoft는 Netscape 이벤트 처리 모델을 사용하는 인터넷의 수많은 페이지에 대해 마지막으로 호환성에 대해 양보해야 했습니다.
그러므로 이 두 브라우저는 사실 모든 브라우저가 다음 코드를 지원합니다.

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

element.onclick = doSomething;

이벤트를 등록하는 가장 좋은 방법입니다. 사용자가 이 HTML 요소를 클릭할 때마다 doSomething()이 실행됩니다. 이는 브라우저 전반에 걸쳐 이벤트를 등록하는 유일한 최선의 방법이며, 이 모델과 그 한계를 깊이 이해하는 것이 중요합니다.
공식적인 기준이 없기 때문에 임시로 전통적인 이벤트 등록 모델이라고 부릅니다. 동시에 w3c도 이벤트 등록을 표준화했으며 Microsoft도 고급 모드를 출시했지만 기존 모드는 여전히 잘 실행될 수 있습니다.


고급 이벤트 레지스터
Netscape 3/IE 4부터 JavaScript는 요소에 대한 일련의 이벤트 속성을 인식할 수 있습니다. 대부분의 HTML 요소에는 onclick, onmouseover, onkeypress 및 기타 속성이 있습니다. 해당 요소가 어떤 속성을 갖고 있는지(어떤 요소가 어떤 이벤트를 지원하는지)는 모두 브라우저에 따라 다릅니다.
이러한 속성 자체도 새로운 것이 아닙니다. 이는 이미 가장 오래된 JavaScript 브라우저에 존재합니다.

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

여기서 A 태그에는 onclick 매개변수가 있으며 이는 JavaScript에서 A 요소의 속성이 됩니다. 이전 브라우저의 이벤트 핸들러는 페이지 소스 코드의 요소에 대한 매개변수를 설정해야만 등록할 수 있었습니다. 이 스크립트를 모든 A 태그에서 실행하려면 모든 링크에 onclick 이벤트를 추가해야 합니다.
기존 이벤트 등록 모델이 등장하면서 이러한 onclick, onmouseover 또는 HTML 요소의 기타 이벤트 처리를 JavaScript를 통해 등록할 수 있습니다. 이제 HTML을 전혀 건드리지 않고도 이벤트 핸들러를 추가, 수정 또는 제거할 수 있습니다. DOM을 통해 HTML 요소에 액세스할 때 다음과 같은 코드를 작성할 수 있습니다.

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

element.onclick = doSomething;

이제 예제 함수 doSomething()이 요소 요소의 onclick 속성에 등록되고 사용자가 이 요소를 클릭하면 기능이 실행됩니다. 이벤트 이름은 소문자여야 합니다.
이 이벤트 핸들러를 삭제하려면 클릭 이벤트를 비워두면 됩니다.

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

element.onclick = null;

이벤트 핸들러는 일반 JavaScript 함수와 동일합니다. 그는 사건이 발생하지 않았을 때에도 그것을 수행할 수 있습니다. 이렇게 쓰면

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

element.onclick ()

그러면 doSomething 도 실행됩니다. 어떻게 해야할지 모르거나 오류가 발생하는 함수라면 실제 이벤트는 발생하지 않습니다. 따라서 이는 이벤트 핸들러를 실행하는 데 거의 사용되지 않는 방법입니다.
Microsoft의 IE5.5 이상 버전의 IE에도 동일한 작업을 수행하는 fireEvent() 메서드가 있습니다. 다음과 같이 사용하세요:

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

element.fireEvent(' onclick')

대괄호 없음
이벤트 핸들러 등록 시 대괄호를 사용할 수 없습니다. onclick 메소드는 다른 기능으로 설정됩니다. 이렇게 쓰면

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

element.onclick = doSomething();

이 함수가 실행되고 그 결과가 onclick에 등록됩니다. 이는 우리가 기대하는 것이 아니며, 이벤트가 발생할 때 함수가 실행되기를 원할 뿐입니다. 또한, 이벤트가 발생하면 실행되도록 작성되어 있어 관련 실행이 없으면 심각한 혼란과 오류가 발생할 수 있습니다.
그래서 이벤트 핸들러에 doSomething() 메서드 전체를 복사합니다. 우리는 이벤트가 실행될 때 이 함수를 실행하기를 원합니다.


this
JavaScript에서 this 키워드는 일반적으로 함수의 소유자를 나타냅니다. 이것이 이벤트가 발생한 HTML 요소를 가리키면 모든 것이 정상이며 많은 일을 쉽게 할 수 있습니다.
안타깝게도 이 기능은 매우 강력하지만 정확히 어떻게 작동하는지 모르면 사용하기 어렵습니다. 이에 대해서는 다른 곳에서 자세히 논의했지만 여기서는 기존 모드의 개요를 설명하겠습니다.
기존 모드에서는 다음과 같이 작동합니다. 인라인 모드와는 약간 다릅니다. 이제 this 키워드는 HTML 매개변수가 아닌 함수에 있습니다. 이 차이점은 나중에 별도로 논의하겠습니다.

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

element.onclick = doSomething; another_element.onclick = doSomething;
function doSomething() {
this.style.BackgroundColor = '#cc0000';
}

doSomething()을 HTML로 등록하면 요소 클릭 이벤트가 발생하면 사용자가 해당 요소를 클릭하면 요소에 배경이 표시됩니다.


익명 함수
마우스가 지나갈 때 모든 div의 배경색이 변경되고 마우스가 떠나면 배경색으로 돌아가기를 원한다고 가정해 보겠습니다. 이를 올바르게 사용하려면 다음과 같이 작성하면 됩니다.

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

var x = document.getElementsByTagName('DIV');
for (var i=0;i x[i].onmouseover = over; x[i ].onmouseout = out;
}

function over() {
this.style.BackgroundColor='#cc0000'
}
this.style.BackgroundColor='#ffffff'
}

이 코드는 달려, 문제없어. 그러나 over() 및 out()은 상대적으로 간단하므로 보다 우아한 익명 함수 메서드를 사용하여 다음과 같이 작성할 수 있습니다.

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

for (var i=0;ix[i].onmouseover = function () {
this .style.BackgroundColor='#cc0000'}
x[i].onmouseout = function () {
this.style.BackgroundColor='#ffffff'}
}

어쨌든 onmouseover와 onmouseout은 모두 기능을 갖습니다. over(), out()을 복사하는 것보다 이벤트가 등록된 스크립트에서 직접 이벤트 핸들러를 정의하는 것이 더 좋습니다. 이러한 함수에는 이름이 없으므로 익명 함수입니다.
이벤트 핸들러를 등록하는 이 두 가지 방법은 기본적으로 동일하며 유일한 차이점은 두 번째 방법의 코드가 적다는 것입니다. 저는 익명 함수를 정말 좋아해서 간단한 이벤트 핸들러를 등록할 때 사용합니다.


문제
작은 문제는 onclick 속성이 기존 모드에서 하나의 기능만 포함할 수 있다는 것입니다. 문제는 하나의 이벤트에 대해 여러 이벤트 핸들러를 등록하려고 할 때 발생합니다.
예를 들어 드래그 가능한 모듈을 작성했습니다. 이 모듈은 onclick 이벤트 핸들러에 등록되어 있으므로 클릭하면 드래그를 시작할 수 있습니다. 또한 사용자 클릭을 추적하고 onunload 중에 서버에 정보를 보낼 수 있는 모듈을 작성하여 페이지가 어떻게 사용되는지 알 수 있습니다. 또한 이 모듈은 요소에 onclick 이벤트를 등록해야 합니다.
다음과 같을 것입니다.

코드를 복사하세요. 코드는 다음과 같습니다.

element.onclick = startDragDrop;
element.onclick =


여기서 오류가 발생합니다. 두 번째 등록 절차는 첫 번째 절차를 덮어쓰므로 사용자가 요소를 클릭하면 spyOnUser()만 실행됩니다.
해결책은 두 가지 메서드가 포함된 메서드를 등록하는 것입니다.

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

element.onclick = function () {
startDragDrop();
spyOnUser()
}

유연한 등록
그러나 웹사이트의 모든 페이지에 두 개의 모듈을 사용하지 않는다고 가정해 보겠습니다. 그래도 이렇게 쓴다면:

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

element. onclick = function ( ) {
startDragDrop();
spyOnUser()
}

함수 중 하나가 정의되지 않았기 때문에 오류 메시지가 표시됩니다. 따라서 이벤트 등록 시 특히 주의하시기 바랍니다. startDragDrop()이 이미 등록되어 있을 때 spyOnUser()를 등록하려는 경우 다음과 같이 작성할 수 있습니다.

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

var old = (element.onclick) ? element.onclick : function () {}
element.onclick = function () {
old ();
spyOnUser()
};

먼저 old 변수를 정의합니다. 요소에 이미 onclick 이벤트 핸들러가 있는 경우 이를 old에 저장합니다. 그렇지 않은 경우 old를 빈 함수로 설정합니다. 이제 div에 대한 새 이벤트 핸들러를 등록해야 합니다. 그런 다음 프로그램은 먼저 old()를 실행한 다음 spyOnUser()를 실행합니다. 이제 새 이벤트 핸들러가 요소에 추가되고 이전에 등록된 이벤트 핸들러(있는 경우)도 포함됩니다.
마지막 질문: 이벤트 핸들러 중 하나를 제거하려면 어떻게 해야 합니까? 이제는 잘 모르겠습니다. 몇 가지 방법을 통해 element.onclick()을 편집해야 합니다. 아직 이에 대해 조사하지 않았습니다.
기타 모드
기존 모드는 매우 간단하고 사용하기 쉽지만 이벤트에 여러 프로그램을 추가할 때의 솔루션은 여전히 ​​추악합니다. W3C의 이벤트 핸들러는 이 문제를 매우 잘 해결합니다.
계속
계속 학습하고 싶다면 다음 장을 읽어주세요.