JavaScript 이벤트 학습 2장 이벤트 브라우저 호환성_javascript 기술

여기에 제시된 이벤트에는 특정 HTML 요소에서 발생할 때 대부분의 브라우저에서 인식되는 이름이 있습니다. 즉, 브라우저는 이 HTML 요소에 대해 등록한 이벤트 핸들러 스크립트를 찾아 즉시 실행합니다.
초반에는 몇 가지 이벤트만 있습니다. 이러한 이벤트는 거의 모든 JavaScript 브라우저, 심지어 아주 오래된 브라우저에서도 작동합니다. 이러한 초기 이벤트는 링크나 양식에서만 작동하고 때로는 전체 창에서 작동하지만 대부분의 다른 HTML 요소에서는 작동하지 않습니다.
시대가 변했고, 새로운 이벤트도 많이 소개되었습니다. 4세대 이상의 브라우저에서는 모든 HTML 요소에 이벤트를 등록할 수 있습니다.
따라서 기본적으로 모든 요소에 이벤트를 바인딩할 수 있지만

에 키다운을 바인딩하는 것은 별 의미가 없습니다.
여기에서 전체 브라우저 이벤트 호환성 목록을 확인하세요.

인터페이스 이벤트

인터페이스 이벤트는 사용자 작업이 아니라 사용자 작업의 결과에 의해 발생합니다.
사용자가 요소를 클릭하면 클릭 시간이 트리거됩니다. 특별한 의미가 있는 요소를 클릭하면 추가 인터페이스 이벤트가 발생합니다.
예를 들어 사용자가 링크를 클릭하면 클릭 시간이 트리거됩니다. 이 링크를 클릭하면 새 페이지가 로드되므로 이 특수 클릭 이벤트로 인해 인터페이스 이벤트 언로드가 트리거됩니다.
다른 인터페이스 이벤트로는 크기 조정, 스크롤, 초점/흐림이 있습니다.

마우스 이벤트

Netscape 2부터 모든 브라우저는 이 두 가지 사실을 발견했습니다. 마우스가 링크 영역에 들어가면 mouseover 이벤트가 트리거됩니다. 그가 이 링크를 클릭하면 클릭 이벤트가 트리거됩니다. mouseout이 추가된 직후 마우스가 링크 영역을 벗어날 때 트리거됩니다. 따라서 전통적인 마우스 이벤트 트라이어드(Traditional Triad)가 확립되었습니다.
3세대 브라우저에서는 마우스 이벤트가 일부 확장되었습니다. dbclick이 추가되었으며, 클릭 이벤트가 mousedown과 mouseup으로 구분되어 사용자가 마우스 버튼을 누르고 팝업됩니다. 드디어 마우스의 궤적을 추적하는 mousemove
도 가능해졌습니다
다음 장에서는 마우스 이벤트에 대해 자세히 설명하겠습니다.

양식 이벤트

양식은 제출 및 재설정 이벤트를 인식할 수 있습니다. 사용자가 양식을 제출하면 제출이 트리거됩니다. 양식이 재설정되면 재설정이 트리거됩니다. 제출 이벤트는 모든 양식 유효성 검사 코드의 핵심입니다. 사용자가 양식을 제출하면 잘못된 데이터가 있는지 확인하기 위해 양식을 순회합니다. 오류가 발견되면 양식 제출을 중지하고 사용자에게 경고를 표시합니다.
양식은 항목이 포커스를 얻거나 잃을 때의 키보드 이벤트 및 클릭 이벤트뿐만 아니라 포커스 및 흐림 이벤트도 식별할 수 있습니다. 추가 호환성 목록을 볼 수 있습니다.
일반적으로 이러한 이벤트를 사용할 때는 주의하세요. 사용자가 양식의 항목에서 벗어날 때 데이터의 유효성을 검사하기 위해 onblur를 사용하는 것은 전적으로 가능하지만 이는 종종 성가신 일입니다. 사용자는 양식을 작성하느라 바쁠 때 팝업 메시지가 표시되는 것을 원하지 않습니다.

W3C 이벤트

W3C의 DOM 2 이벤트 사양에서는 일부 Mutation 이벤트도 정의합니다. 이러한 이벤트는 문서의 DOM 구조가 변경될 때 트리거됩니다. 가장 일반적인 것은 DOM이 변경될 때 트리거되는 DOMSubtreeModified 이벤트입니다.
Mozilla는 이 이벤트를 subtreemodified로 설정합니다. Mozilla는 우리가 언급하지 않은 다른 w3c 이벤트도 지원하지 않습니다.

Microsoft 이벤트

Microsoft에서는 다양한 이벤트를 만들었습니다. 일부는 매우 흥미롭습니다.
comtextmenu 이벤트는 사용자가 언제든지 마우스 오른쪽 버튼을 클릭하면 트리거됩니다. 이는 남용할 만큼 유용합니다. Mozilla도 이 이벤트를 지원합니다.
XML 파일을 가져오면 Readystatechange 이벤트가 일부 로드 이벤트처럼 제공됩니다. XML 문서의 ReadyState가 4가 되면 문서가 로드됩니다. (readyState가 무엇인지 묻지 마세요. 작동하고 충분합니다.)
놀라운 점은 unload 이벤트가 발생하기 전에 beforeunload 이벤트가 있다는 것입니다. 페이지 닫기를 취소하도록 설계되었지만 아무도 신경 쓰지 않았습니다.
마지막으로 Microsoft는 mouseover 및 mouseout 이벤트와 거의 동일한 mouseenter 및 mouseleave 이벤트도 개발했습니다.마우스 이벤트 장을 참조하세요.
물론 위 이벤트는 IE에서만 지원됩니다.

Mozilla 이벤트

물론 Mozilla에도 자체 이벤트가 많이 있습니다. 아직 자세히 공부해본 적은 없습니다.

이벤트 핸들러

모든 이벤트는 트리거될 때마다 브라우저에서 감지됩니다. 또한 브라우저는 일반적으로 사용자가 링크를 클릭할 때와 같은 기본 절차를 실행합니다. 그러나 때로는 아무 일도 일어나지 않습니다.

이벤트 핸들러의 핵심은 다른 일이 발생하도록 할 수 있다는 것입니다. 이벤트가 발생할 때 브라우저가 스크립트를 실행하도록 할 수 있습니다. 이렇게 작성하면 이벤트가 발생할 때마다 스크립트가 실행됩니다. 이러한 스크립트가 논리적으로 유용하다면 사용자는 매우 기뻐할 것입니다.

이벤트가 트리거될 때 스크립트가 실행될 수 있도록 하려면 다음과 같이 HTML 요소의 특정 작업에 대한 이벤트를 등록해야 합니다.

 

      这样脚本里的alert('I\'ve been clicked!')就会在click事件发生的时候执行。这就注册了一个事件处理程序。<br>

계속

계속 학습하고 싶다면 다음 장을 읽어보세요.