JavaScript 이벤트 이벤트 학습 1장 Event_javascript 기술 소개

이벤트가 없으면 대본도 없습니다. JavaScript 코드가 있는 웹 페이지를 살펴보십시오. 거의 모든 예에는 스크립트를 트리거하는 이벤트가 있습니다. 그 이유는 매우 간단합니다. JavaScript는 페이지에 내부 활동을 추가하는 것입니다. 즉, 사용자가 작업을 수행하면 페이지가 응답합니다.

따라서 JavaScript에는 사용자의 행동을 감지하고 언제 반응해야 할지 알 수 있는 방법이 필요합니다. 이를 위해서는 어떤 기능이 실행될지 알아야 하며, 해당 기능은 웹 페이지에 색상을 추가할 것으로 생각되는 몇 가지 작업을 수행합니다. 이 단어는 그러한 스크립트를 작성하는 방법을 설명합니다. 쉽지는 않지만 매우 만족스러운 작업입니다.

이벤트는 사용자가 무언가를 할 때 발생합니다. 물론 사용자가 직접 실행하지 않는 이벤트도 있습니다. 예를 들어 페이지가 로드될 때 로드 이벤트가 실행됩니다.

JavaScript는 일부 이벤트를 감지할 수 있습니다. Netscape 2부터는 HTML 요소에 이벤트 핸들러를 추가하는 것이 가능합니다. 이러한 이벤트 핸들러는 링크 클릭과 같은 특정 이벤트를 기다립니다. 발생하면 지정한 JavaScript 코드를 통해 이벤트가 실행됩니다.

사용자가 액션을 취하면 이벤트가 발생합니다. 코드로 인해 페이지가 이 작업에 응답하면 상호 작용이 발생합니다.

이벤트 핸들러의 역사

위에서 언급했듯이 이벤트 핸들러가 없는 페이지에는 자바스크립트를 추가할 필요가 없습니다. 최고의 스크립트는 사용자 작업에 반응하는 스크립트입니다. 따라서 Netscape는 JavaScript를 지원하는 브라우저의 두 번째 버전을 출시했을 때 이벤트도 지원했습니다.

Netscape 모드

Netscape는 소수의 이벤트만 지원합니다. 마우스오버와 마우스아웃은 마우스를 굴렸을 때 이미지가 바뀌고, 굴렸을 때 원래 상태로 돌아가는 멋진 효과 때문에 빠르게 인기를 끌었습니다. 그리고 사용자가 양식을 제출했는지 또는 양식을 재설정했는지 확인할 수 있으므로 클라이언트측 확인이 가능해집니다. 또한 브라우저는 양식의 항목이 포커스를 얻거나 잃거나 페이지 다운로드가 완료되거나 닫히기 시작하는 시기를 감지할 수도 있습니다. 오늘날에는 매우 흔한 일이지만 당시에는 혁명적이었습니다. 사용자의 행동에 피드백을 줄 수 있기 때문에 진정한 인터랙션이 가능해집니다.

가장 오래된 형태의 이벤트 핸들러는 다음과 같습니다. 사용자가 링크를 클릭하면 이벤트 핸들러가 실행되고 대화 상자가 나타납니다.



이벤트를 처리하는 가장 오래된 방법에 주목하세요. Netscape의 표준은 매우 중요합니다. JavaScript가 작동하려면 IE를 포함한 다른 브라우저가 Netscape 2 및 3 이벤트 처리 표준을 따라야 합니다. 따라서 가장 오래된 이벤트와 이벤트 핸들러는 모든 JavaScript 브라우저에서 잘 작동합니다.

현재 이벤트 모드

그러나 이전 소개에 비해 현재 이벤트 핸들러가 많이 변경되었습니다. 첫째, 급격한 양적 성장이다. HTML 요소에 대한 이벤트 핸들러를 등록하는 방법도 크게 변경되었습니다. 이제 JavaScript로 완전히 구성할 수 있습니다. 많은 코드에 매달릴 필요 없이 매우 간단한 코드를 작성하여 모든 이벤트 핸들러를 설정할 수 있습니다.
V4 브라우저는 이벤트에 대한 많은 정보도 제공합니다. 마우스는 어디에 있나요? 사건은 언제 발생했나요? 키보드가 눌려져 있나요? 궁극적으로 브라우저는 요소와 상위 요소 모두 동일한 작업에 대한 이벤트 핸들러를 갖도록 선택해야 합니다. 어떤 이벤트가 먼저 트리거되나요?
이 기능 때문에 브라우저 간의 전쟁이 심화되었습니다. Netscape와 Microsoft는 서로 거의 호환되지 않는 두 가지 이벤트 모델 세트를 개발했습니다. 최근 w3c에서 게시한 DOM 이벤트 사양인 세 번째 모델이 등장하기 시작했습니다. 심각한 결함이 있지만 w3c 모델은 이전 Netscape 모델을 기반으로 하지만 더 일반화되고 일반화되어 있으며 매우 뛰어난 작업이며 많은 흥미로운 기능을 추가하고 이전 이벤트 모델의 일부 문제도 해결합니다.
세 가지 모델이 있으므로 이벤트 핸들러는 모든 브라우저에서 동일한 방식으로 실행될 수 없습니다.

브라우저 호환성 문제

계속 진행하겠습니다. DHTML, w3c DOM 또는 기타 고급 스크립팅 기술과 마찬가지로 우리는 다른 사람을 대신하여 구매하는 모든 바이트에 주의해야 합니다. IE에서 stopPropagation()을 사용하거나 Netscape에서 srcElement를 사용하면 심각한 오류가 발생하고 코드가 쓸모 없게 됩니다. 따라서 메소드나 속성을 사용하기 전에 브라우저 지원에 대해 필요한 확인을 해야 합니다.
간단한 코드는 다음과 같습니다.

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

if ( Netscape) {
Netscape 모델 사용
}
else if (Explorer) {
Microsoft 모델 사용
}

이것은 문제 해결의 시작일 뿐입니다. 코드에서 Netscape 또는 IE 이외의 소수의 브라우저 실행을 허용하지 않는 한 최신 브라우저에서 실행할 수 있는 이벤트 핸들러의 수는 엄청납니다.

모든 틈새 브라우저는 해당 이벤트 모델을 지원하기 위해 바람직하지 않은 결정을 내려야 합니다. Konqueror/Safari는 일반적으로 W3C 표준을 엄격하게 따르도록 선택합니다. Opera와 iCab은 일반적으로 대부분의 구형 Netscape 모델과 일부 Microsoft 모델을 지원합니다. 나는 다른 틈새 브라우저에 대해 어떤 연구도 수행하지 않았습니다.

그러나 다른 틈새 브라우저에서는 Microsoft의 이벤트 처리 방법을 지원하는 동시에 W3C 및 이전 Netscape의 특성도 가질 수 있습니다. 그것은 잘못된 것이 아닙니다. 그들은 모두 우리가 알고 있는 모델을 각자의 방식으로 지원합니다. 코드에 문제가 없어야 합니다.

브라우저 유형 감지를 사용하지 마세요

우선 브라우저 유형 감지를 절대 사용하지 마세요. 지옥으로 가는 지름길입니다. 코드가 navigator.userAgent를 사용하여 이벤트 모델을 감지하는 경우 이는 단순히 쓸모가 없으며 직접 꺼내야 합니다.
둘째, DHTML 객체 감지의 이벤트 객체 감지에 혼동하지 마세요. DHTML을 작성할 때 일반적으로 if(document.all)와 같이 DOM 지원을 확인합니다. 지원되는 경우 Microsoft의 모든 컨테이너를 사용하면 코드가 매우 잘 실행될 수 있습니다.
그러나 DHTML과 이벤트 핸들러는 브라우저 호환성 모드가 다릅니다. 예를 들어 Opera 6은 W3C DOM의 일부를 지원하지만 W3C 이벤트 모델은 지원하지 않습니다. 따라서 DHTML 개체 감지는 Opera에서 잘못된 결정을 내립니다. 따라서 코드에서 if(document.layers) 또는 기타 이벤트 모델 감지를 사용하는 것은 올바르지 않습니다.

올바른 질문

그럼 어떻게 해야 할까요? 이벤트 속성의 이름으로 인해 이러한 문제가 발생합니다. 특정 개체 감지에 대해 다른 방법을 사용하면 기본적으로 브라우저 비호환 문제의 99%를 해결할 수 있습니다. 마우스 위치만 매우 번거롭고 다른 모든 것은 비교적 간단합니다.
그리고 이 세 가지 이벤트 모델에 대해서는 전혀 생각하지 않는 것이 가장 좋습니다. 실제로 우리는 4개의 이벤트 등록 모델, 2개의 이벤트 실행 모델, 2개의 이벤트 시퀀스를 이해해야 합니다. 여기에서 이벤트 호환성 목록을 빠르게 볼 수 있습니다.
아주 복잡해 보이지만 그렇지 않습니다. 이 사실을 알게 되면 이벤트 핸들러를 진정으로 이해하기 시작해야 합니다. 올바른 질문을 하는 것이 중요합니다. "이벤트 핸들러의 코드를 어떻게 작성합니까?"라고 묻지 마십시오. 올바른 질문일지라도 대답하기 어렵습니다. 설명하는 데 11페이지 분량의 기사가 필요할 것입니다. 따라서 구체적인 답변이 있는 구체적인 질문을 해야 합니다.

"어떤 이벤트가 있나요?"
"HTML 요소에 대한 이벤트 핸들러를 어떻게 등록하나요?"
"어떻게 방지하나요?" ? 기본 동작이 발생하면 어떻게 되나요? "
"더 많은 정보를 얻으려면 어떻게 해야 하나요? "
" 이벤트를 성공적으로 실행하면 해당 속성을 어떻게 읽을 수 있나요? 🎜> “요소와 상위 요소 모두 이벤트에 대한 이벤트 핸들러가 있는 경우 누가 먼저 실행합니까?”

위의 모든 질문에 대한 자세한 답변은 별도의 장에서 설명합니다.
크로스 브라우저 이벤트 핸들러를 작성하는 요령은 전체 이벤트 모델을 사용하는 것이 아니라 각 질문에 개별적으로 답변하는 것입니다. 이벤트 속성을 읽어야 하는 경우에만 브라우저 호환성 문제를 고려해야 한다는 것을 알게 될 것입니다.
먼저 이벤트 등록 모델을 선택한 다음 이 이벤트가 모든 브라우저에서 트리거되는지 확인한 다음 올바른 속성을 읽고 마지막으로 이벤트 트리거 순서 문제를 해결합니다(있는 경우). 이렇게 하면 브라우저 호환성 문제를 쉽게 해결하고 코드가 모든 브라우저에서 제대로 실행되도록 할 수 있습니다.

계속

이벤트를 순서대로 배우고 싶다면 다음 장부터 읽어야 합니다.


이벤트 핸들러 코드 작성
그럼 이벤트 핸들러 코드는 어떻게 작성할까요? 빨리 답을 얻고 싶고 나중에 이론을 배울 계획인 분들을 위해 이 장에서는 간략한 개요를 설명하겠습니다.


이벤트 핸들러 등록
첫 번째 단계는 이벤트 핸들러를 등록하는 것입니다. 확실히 해야 할 것은 브라우저가 항상 코드를 실행한다는 것입니다.
이벤트 핸들러를 등록하는 방법에는 인라인, 기존, w3c, Microsoft의 네 가지가 있습니다.
전통적인 방법은 여러 브라우저에서 잘 작동하고 자유도와 다양성이 뛰어나므로 사용하는 것이 가장 좋습니다. 다음과 같이 이벤트 핸들러를 등록합니다.

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

요소. onclick = doSomething;
if (element.captureEvents) element.captureEvents(Event.CLICK)



이제 이 doSomething() 함수는 HTML 요소 요소의 클릭 이벤트에 대한 이벤트 핸들러로 등록됩니다. 즉, 사용자가 이 요소를 클릭할 때마다 doSomething()이 실행됩니다.

이 이벤트에 액세스하세요

하지만 이벤트 핸들러를 등록하고 나면 실제 코드를 작성하기 시작합니다. 일반적으로 이벤트 자체에 액세스하여 이벤트 정보를 읽을 수 있습니다.

이 이벤트에 액세스하여 해당 속성을 읽을 수 있도록 하려면 일반적으로 이벤트 핸들러가 다음과 같이 시작됩니다.

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

function doSomething(e) {
if (!e) var e = window.event
// e는 이벤트를 참조합니다
}

이제 e는 모든 브라우저에서 이벤트를 나타내며 이 이벤트에 액세스할 수도 있습니다.

이 HTML 요소에 액세스

때때로 이벤트가 발생한 요소에 액세스할 수 있기를 원할 때가 있습니다. 여기에는 두 가지 방법이 있습니다. 이 키워드를 사용하거나 target/srcElement 속성을 사용하는 것입니다.

HTML 요소에 액세스하는 더 안전한 방법은 this 키워드를 사용하는 것입니다. 이는 항상 올바른 HTML 요소를 가리키는 것은 아니지만 기존 모드에서는 잘 작동합니다.

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

function doSomething(e) {
if (!e) var e = window.event
// e는 이벤트를 참조
// 현재 이벤트를 처리하는 HTML 요소를 참조
// target/srcElement 참조 이벤트가 원래 발생한 HTML 요소
}

target/srcElement 속성에는 이벤트가 원래 발생한 HTML 요소에 대한 참조가 포함됩니다. 매우 유용하지만 이벤트가 캡처되거나 버블링되면 이벤트가 원래 발생한 요소로 남아 변경되지 않습니다.

속성 읽기

몇 가지 흥미로운 이벤트 속성(이벤트 속성)을 읽는 문제는 브라우저 호환성에서 가장 나쁜 부분입니다. 이 호환성 목록을 연구한 다음 자신만의 코드를 작성하여 필요한 정보를 얻으세요.
항상 가장 주의 깊게 물체 검사를 하시기 바랍니다. 먼저 각 속성이 존재하는지 확인한 다음 해당 값을 읽어보세요. 예:

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

function doSomething(e) {
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode
else if (e.which) code = e.which; 🎜>

이제 코드에 누른 키가 포함되며 모든 브라우저와 호환됩니다.

이벤트 순서
마지막으로 이벤트를 버블링할지 결정해야 합니다. 이벤트가 팝업되는 것을 원하지 않으면 차단하세요.

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

function doSomething(e) {

if (!e) var e = window.event
// 이벤트 처리
e.cancelBubble = true
if (e; .stopPropagation) e.stopPropagation( );
}

코드 작성
이제 이벤트 핸들러에 대한 코드 작성을 시작할 수 있습니다. 이전 코드와 정보를 통해 이벤트가 발생하는 시기와 코드가 어떻게 응답해야 하는지 알 수 있습니다. 기억하세요: 상호 작용을 보다 논리적으로 만들지 않으면 사용자가 무슨 일이 일어나고 있는지 이해하지 못할 것입니다.