UI 이벤트 사용자 인터페이스 events_javascript 기술

UI 이벤트는 사용자 동작과 직접적인 관련이 없습니다. UI 이벤트에는 다음이 포함됩니다.

DomActivate: 이 이벤트는 사용자의 마우스 또는 키보드 이벤트와 같은 일부 사용자 동작에 의해 요소가 활성화될 때 트리거됩니다. 이 이벤트는 DOM 레벨 3 이벤트에서 폐기되었습니다. FF2와 Chrome에서는 브라우저 간 구현 메커니즘의 차이로 인해 이 이벤트를 사용하지 않는 것이 좋습니다.

로드: 창 개체에서는 페이지가 로드된 후에 트리거됩니다. 프레임셋에서는 모든 프레임이 로드된 후에 트리거됩니다. img 태그를 참조할 경우 이미지 이후에 트리거됩니다. 등이 로드됩니다.

Unload: window 객체에서는 페이지가 언로드된 후에 트리거됩니다. 프레임셋에서는 모든 프레임이 언로드된 후에 트리거됩니다. img 태그를 참조할 경우 이미지 이후에 트리거됩니다. 언로드된 것 등입니다.

중단: 요소가 완전히 로드되지 않았고 사용자가 다운로드 작업을 중지하기 전에 트리거됩니다.

오류: 창의 JavaScript에 오류가 발생할 때 발생, img를 로드할 수 없거나 객체 요소를 로드할 수 없을 때 발생, 프레임세트에 있는 하나 이상의 프레임을 로드할 수 없을 때 발생,
선택: 이 이벤트는 사용자가 텍스트 상자에서 하나 이상의 문자를 선택할 때 트리거됩니다.
크기 조정: 창이나 프레임의 크기가 조정될 때 트리거됩니다.
스크롤: 사용자가 스크롤 막대를 사용하여 요소를 스크롤할 때 트리거됩니다.
대부분의 HTML 이벤트는 창 개체 또는 양식 컨트롤과 관련되어 있습니다.
브라우저가 DOM2 수준 이벤트에서 HTML 이벤트를 지원하는지 확인하려면 다음 코드를 사용할 수 있습니다.

　　var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');

DOM2 수준 이벤트에 구현된 경우 그렇지 않으면 true를 반환합니다. false

　　var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);

dom3 레벨에도 동일하게 적용됩니다.

로드 이벤트

로드 이벤트는 아마도 자바스크립트에서 가장 일반적으로 사용되는 이벤트일 것입니다. window 객체의 경우 웹페이지가 완전히 로드되면 load 이벤트가 트리거됩니다. 요약하자면, HTML에는 window 요소에 접근할 수 있는 권한이 없기 때문에 window에서 발생하는 모든 이벤트는 body 요소의 속성을 통해 접근할 수 있습니다.

img 태그의 경우 img 태그의 src 속성을 지정하면 해당 로드 이벤트도 트리거될 수 있습니다.

다음과 같습니다.

EventUtil.addHandler(window, “load”, function(){ 
var image = new Image(); 
EventUtil.addHandler(image, “load”, function(event){ 
alert(“Image loaded!”); 
}); 
image.src = “smile.gif”; 
});

IE9에서 실행할 때 스크립트 태그 요소와 같이 비표준 방식으로 로드 이벤트를 지원하는 다른 요소도 있습니다. , FF, Opera, Chrome, Safari 3.0에서는 스크립트가 동적으로 추가되고 로딩이 완료되면 img 요소와 달리 src 속성이 할당된 후에 스크립트의 로드 이벤트가 시작됩니다. 이 요소가 문서에 추가되었습니다. 따라서 이벤트 핸들러의 순서는 src 할당과 관련이 없습니다.
예시는 다음과 같습니다.

EventUtil.addHandler(window, “load”, function(){ 
var script = document.createElement(“script”); 
script.type = “text/javascript”; 
EventUtil.addHandler(script, “load”, function(event){ 
alert(“Loaded”); 
}); 
script.src = “example.js”; 
document.body.appendChild(script); 
});

IE와 Opera도 링크 태그의 로드 이벤트를 지원합니다.

언로드 이벤트
로드 이벤트의 반대는 문서가 완전히 언로드될 때 발생하는 이벤트입니다. 일반적인 예는 브라우저가 한 페이지에서 다른 페이지로 이동할 때 이 이벤트가 트리거되는 것이며, 이 이벤트는 일반적으로 메모리를 해제하고 불필요한 메모리 점유를 방지하는 데 사용됩니다. 로드 이벤트와 유사하게 언로드 이벤트는 js와 HTML 속성을 통해 두 가지 방법으로 생성될 수 있습니다.
unload 이벤트 핸들러에 특히 주의하세요. unload 이벤트가 발생하기 때문에 모든 개체를 사용할 수 있는 것은 아니며 페이지가 로드될 때 계속 사용할 수 있기 때문입니다. Dom 노드의 위치를 ​​조작하거나 모양을 변경하려고 하면 오류가 발생합니다.

크기 조정 이벤트

브라우저 창의 길이와 높이가 변경되면 크기 조정 이벤트가 발생합니다. 이 이벤트는 창 개체에서 발생합니다. 처음 두 이벤트의 등록 방법입니다.

window 객체에서 발생하는 다른 이벤트와 마찬가지로 DOM 브라우저에서 이 이벤트의 대상은 문서를 참조하며 IE8 이하 버전의 브라우저에서는 사용할 수 있는 관련 속성이 없습니다.

브라우저마다 크기 조정 이벤트에 많은 차이가 있습니다. IE 사파리 크롬 오페라에서는 픽셀 값이 수정되는 한 이벤트가 트리거됩니다. FF에서 이 이벤트는 크기 조정 작업이 중지될 때만 트리거됩니다. 그리고 브라우저를 최대화하거나 최소화해도 이 이벤트가 트리거됩니다.

스크롤 이벤트

스크롤 이벤트는 창 개체에서 발생하지만 페이지 수준 요소에도 적용됩니다. 혼합 모드에서는 해당 변경 사항이 표준 모드의 요소에 반영되며, Safari를 제외한 다른 브라우저에서는 위의 규칙을 따릅니다. , 예를 들면

EventUtil.addHandler(window, “scroll”, function(event){ 
if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。 
alert(document.documentElement.scrollTop); 
} else { 
alert(document.body.scrollTop); 
} 
});

위 내용은 UI Events User Interface Events_javascript 스킬 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!