JavaScript 이벤트 학습 3장 초기 이벤트 핸들러_Javascript 기술

이러한 고대 브라우저는 Netscape에서 개발한 이벤트 핸들러 등록 방법 중 하나만 지원합니다. Netscape가 먼저 공격했기 때문에 Microsoft가 JavaScript 이벤트를 지원하는 브라우저를 구축하려면 Netscape의 선례를 따라야 하므로 여기서는 호환성 문제가 없습니다. 따라서 이 모드는 이벤트를 전혀 지원하지 않는 Mac의 IE3을 제외하고 JavaScript를 지원하는 모든 브라우저에서 작동합니다.
이벤트 핸들러 등록
인라인 이벤트 등록 모델에서 이벤트 핸들러는 다음과 같은 HTML 요소의 속성과 같습니다.

이 링크에서 클릭 이벤트가 발생하면 이벤트 핸들러가 트리거되고 스크립트가 실행됩니다. 경고 대화 상자가 나타납니다. JavaScript 함수를 실행할 수도 있습니다.

위 두 예에서 이벤트 이름의 대소문자는 단지 습관의 문제입니다. , HTML 대소문자를 구분하지 않으므로 임의로 작성하시면 됩니다. XHTML에서는 모든 속성 이름이 소문자여야 하므로 XHTML을 사용하는 경우 이름을 onclick으로 작성해야 합니다.
사용하지 마세요
이 인라인 등록 모델은 매우 오래되고 안정적이지만 단점이 있습니다. 그는 여기에 속하지 않는 XHTML 구조 레이어 내부에 JavaScript 코드를 작성하도록 요구합니다.
그러므로 이 방법은 사용하지 않는 것이 좋습니다. 여기에 자세한 설명이 있습니다.
이러한 기존 모델을 이해하면 JavaScript 이벤트 처리에 대한 전체적인 느낌을 얻는 데 많은 도움이 되지만 아래에서 설명할 최신 모델을 사용하는 것이 더 좋습니다.
기본 액션
당시 넷스케이프에서는 기본 액션을 설정했는데, 기본 액션이 실행되지 않도록 하는 방법이 있었습니다. 그의 모델은 브라우저 전쟁과 표준을 구해냈고 오늘날에도 여전히 잘 작동합니다.
우리 모두 알고 있듯이 사용자가 링크를 클릭하면 브라우저는 href 속성에 따라 페이지를 로드합니다. 이는 링크에 대한 기본 작업입니다. 하지만 onclick 이벤트 핸들러를 정의하면 어떻게 될까요? 구현해야 하지만 언제 구현되나요?

이 링크를 클릭하면 이벤트 핸들러가 먼저 실행됩니다. 결국 기본 작업이 발생하면(새 페이지가 로드됨) 이벤트 핸들러 자체를 포함하는 이전 페이지가 메모리에서 지워집니다. onclick 이벤트 핸들러가 실행되는 경우 기본 작업 이전에 실행되어야 합니다.
이에는 매우 중요한 원칙이 있습니다. 이벤트가 기본 작업과 이벤트 핸들러를 모두 트리거하는 경우
, 이벤트 핸들러가 먼저 실행되고
기본 작업이 나중에 실행됩니다
. 따라서 위 예에서는 doSomething( )이 먼저 실행되고 브라우저가 링크를 엽니다.
기본 이벤트 차단
이를 결정한 후 대부분의 사람들은 기본 이벤트를 방지하는 방법에 대해 생각하기 시작합니다. 이 예에서는 브라우저가 새 페이지를 열지 못하게 할 수 있습니다.
따라서 이벤트 핸들러는 부울 값(true 또는 false)을 반환할 수 있습니다. false의 의미는 "기본 작업을 수행하지 않음"입니다. 이런 식으로 예제를 다음과 같이 변경할 수 있습니다.
이 링크는 실행되지 않습니다. 이 함수가 실행된 후 프로그램은 false를 반환하여 브라우저에 기본 작업을 수행하지 않도록 지시합니다.
때로는 함수가 기본 작업을 수행해야 하는 시기와 수행하지 말아야 하는 시기를 결정하도록 해야 할 때가 있습니다. 따라서 예를 다음과 같이 변경할 수 있습니다.

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

function doSomething()
{
return verify('정말로 이 링크를 따르시겠습니까?')
}


이것은 (매우 간단한) 사용자 상호작용입니다. 사용자에게 질문을 하고, 대답이 '예'이면 함수는 true를 반환하고, 너무 오랫동안 취소된 경우에는 false를 반환합니다. 이 반환 값은 이벤트 핸들러에 의해 캡처되어 이벤트 자체에 전달됩니다. flase인 경우 기본 작업이 실행되지 않고 링크가 입력되지 않습니다.
그러나 모든 기본 작업을 차단할 수 있는 것은 아닙니다. 예를 들어 언로드 이벤트가 작동하지 않습니다. 사용자가 브라우저 창을 닫는다고 가정하면 언로드 이벤트가 트리거됩니다. 창이 닫히는 것을 방지할 수 있다면 사용자가 원하지 않는데도 창이 계속 열려 있습니까? 물론 그렇지 않습니다.
Microsoft의 beforeunload 속성을 사용해 언로드를 방지할 수 있습니다. 사용자가 이 작업을 확인하도록 선택하는 데 매우 혼란스러운 상황을 만드는 대신. 사용하지 않는 것이 좋습니다.
기본 동작을 방지하기 위해 false를 반환하는 것은 모든 브라우저에서 지원됩니다. 이는 이벤트 핸들러의 기본 구성 요소입니다. 오늘날의 이벤트 핸들러 모델에는 기본 작업을 방지하기 위한 몇 가지 새로운 메서드도 추가되었습니다.
W3C는 이벤트에 방지Defalut() 메서드를 추가했습니다. 이 방법을 참조하면 기본 작업이 차단됩니다.
Microsoft는 이벤트에 returnValue 속성을 추가했습니다. 해당 값을 false로 설정하면 기본 작업도 차단됩니다.
하지만 그럴 필요는 없으며 false를 반환하는 것만으로도 충분합니다.
window.status
여기에는 false를 반환하는 예외가 있습니다. 마우스가 링크 위로 지나갈 때 변경되도록 창의 상태 표시줄을 설정하고 상태 표시줄에 링크 주소를 표시하는 기본 동작을 방지하려면 true를 반환해야 합니다:

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

onMouseOver="window.status = '이 링크는 다른 곳으로 이동합니다'; return true">

이렇게 하지 않으면 코드가 작동하지 않습니다. 무슨 일이 일어나고 있는지 아무도 모릅니다. 그것은 단지 이상한 일입니다.
this
JavaScript에서 this 키워드는 일반적으로 함수의 소유자를 나타냅니다. 이것이 이벤트가 발생한 HTML 요소를 가리키면 모든 것이 정상이며 많은 일을 쉽게 할 수 있습니다.
안타깝게도 이 기능은 매우 강력하지만 정확히 어떻게 작동하는지 모르면 사용하기 어렵습니다. 이에 대해서는 다른 곳에서 자세히 논의했지만 여기서는 인라인 모드의 개요를 설명하겠습니다.
인라인 모드에서는 이를 이벤트 핸들러 함수에 매개변수로 전달할 수 있습니다. 따라서 다음을 수행할 수 있습니다.

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

function doSomething(obj)
{
// obj는 이제 링크를 참조합니다
}

당신은 함수에 obj에 저장되는 참조를 전달했습니다. 이제 클릭한 요소를 찾기 위해 문서를 탐색할 필요가 없습니다. 요소는 obj 변수에 안전하게 저장됩니다. 이제 다음을 수행할 수 있습니다.

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

🎜>{
var linkTo = obj.href;
return verify('정말로 'linkTo' 링크를 따르시겠습니까?')
}


함수 링크를 수락합니다. 참조는 obj에 저장됩니다. 이제 이 링크의 링크 주소를 읽고 확인할 수 있습니다. 이 방법은 모든 링크에 적용할 수 있습니다. 방금 클릭한 링크의 실제 주소가 항상 표시됩니다.

계속
계속 학습해야 한다면 다음 장을 읽어보세요.