> 웹 프론트엔드 > JS 튜토리얼 > js 브라우저 events_javascript 기술 소개

js 브라우저 events_javascript 기술 소개

WBOY
풀어 주다: 2016-05-16 17:54:41
원래의
1174명이 탐색했습니다.

브라우저 이벤트
브라우저 이벤트는 문서 로드 이벤트 onload, 문서 닫기 이벤트 onunload, 브라우저 포커스 상실 이벤트 onblur, 포커스 얻기 이벤트 onfocus wait 등 문서 로드부터 문서가 닫힐 때까지의 브라우저 이벤트를 의미합니다. .

먼저 다음 코드를 살펴보세요.

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

//소스 프로그램 3.1
"http://www.w3.org/TR/REC- html140/strict.dtd">





body>


문서 로드:


초점 가져오기:


초점 상실:

스크롤 막대 드래그: < /p>

크기 변경:




위의 소스 프로그램을 *.html(또는 *.htm) 문서로 저장합니다. 문서를 두 번 클릭하면 시스템에서 탐색을 위한 기본 브라우저를 호출합니다.


문서가 로드되면 window.load 이벤트가 발생하고 그림 3.2와 같이 경고 상자가 나타납니다.


그림 3.2 문서 로딩 시 window.load 이벤트 발생
포커스가 문서 페이지, 윈도우에 가해지면. onfocus 이벤트가 발생하면 그림 3.3과 같이 경고 상자가 나타납니다.

그림 3.3 문서가 포커스를 얻을 때 window.onfocus 이벤트가 트리거됩니다.
페이지가 포커스를 잃으면 window.blur 이벤트가 발생합니다. 트리거되고 경고 팝업이 나타납니다. 프레임은 그림 3.4에 나와 있습니다.

그림 3.4 문서가 포커스를 잃을 때 window.onblur 이벤트가 트리거됩니다.
사용자가 스크롤 막대를 드래그하면 window.onscroll 이벤트가 트리거되고 팝업됩니다. 경고 상자는 그림 3.5에 표시됩니다.

그림 3.5 스크롤 막대를 드래그하여 window.onscroll 이벤트 실행
사용자가 문서 페이지 크기를 변경하면 window.onresize 이벤트가 발생하면 그림 3.6과 같이 경고 상자가 나타납니다.

그림 3.6 문서 페이지 크기 변경 및 window.onresize 이벤트 트리거
브라우저 이벤트는 일반적으로 창 위치 지정, 타이머 설정을 처리하는 데 사용됩니다. 또는 사용자 기본 설정에 따라 페이지 계층 구조 및 콘텐츠를 설정하는 등의 상황에서 페이지의 상호 작용 및 동적 기능에 널리 사용됩니다.
참고: Netscape Navigator 4는 사용자가 현재 브라우저 창을 이동할 때 발생하는 window.onmove 이벤트를 지원합니다. 이는 주로 창 위치 지정에 사용됩니다. Internet Explorer는 window.onmove 이벤트를 지원하지 않습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿