UI(사용자 인터페이스) Event, 사용자가 페이지의 요소와 상호 작용할 때 트리거됨
Load 이벤트: 페이지가 완전히 로드되면 창의 로드 이벤트가 트리거됩니다.
Unload 이벤트: 문서가 완전히 언로드된 후 트리거됩니다. 사용자가 한 페이지에서 다른 페이지로 전환할 때마다 발생합니다.
Resize 이벤트: 브라우저가 새로운 높이나 너비로 조정되면 크기 조정 이벤트가 트리거됩니다. 성능 문제를 방지하려면 이 이벤트에 계산 논리를 추가하지 않도록 주의하세요.
EventUtil.addHandler(window, "resize", function (event) { //防抖函数 //每次调用函数都会清除之前的计数器,并重新计数,计数完成时,执行操作。 var timer; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(function () { //setTimeout返回唯一标识符,可以使用它来取消计数器 console.log("123"); },500); } }());//此处的双括号表示,立即调用返回值
Scroll 이벤트: 사용자가 흐름 막대를 사용하여 요소의 콘텐츠를 스크롤하면 요소에서 트리거됩니다.
EventUtil.addHandler(window, "scroll", function (event) { //函数节流 var timer; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(function () { //setTimeout返回唯一标识符,可以使用它来取消计数器 if (document.compatMode == "CSS1Compat") { //标准模式 console.log("Left:" + document.documentElement.scrollLeft); console.log("Top:" + document.documentElement.scrollTop); } else { //混杂模式 console.log("Left:" + document.body.scrollLeft); console.log("Top:" + document.body.scrollTop); } }, 500); } }());
Focus 이벤트, 페이지가 포커스를 얻거나 잃을 때 트리거됩니다.
Blur 이벤트: 요소가 포커스를 잃을 때 트리거됩니다. 이 이벤트는 버블링되지 않습니다. 모든 브라우저가 이를 지원합니다.
Focus 이벤트: 요소가 포커스를 얻을 때 트리거됩니다. 이 이벤트는 버블링되지 않으며 모든 브라우저에서 이를 지원합니다.
Focusin 이벤트: 요소가 포커스를 얻을 때 트리거됩니다. 이 이벤트는 HTML 이벤트 포커스와 동일하지만 버블링됩니다. 이 이벤트를 지원하는 브라우저는 IE5+ safari5.1+ Opera11.5+ 및 Chrome입니다.
Focusout 이벤트: 요소가 손실될 때 트리거됩니다. 이 이벤트는 HTML 이벤트 블러의 범용 버전입니다. 이 이벤트를 지원하는 브라우저는 IE5+ safari5.1+ Opera11.5+ 및 Chrome입니다.
마우스 및 휠 이벤트
클릭 이벤트: 사용자가 왼쪽을 클릭할 때. 마우스 버튼 또는 Enter 키를 누르면 실행됩니다.
DbClick 이벤트: 사용자가 마우스 왼쪽 버튼을 두 번 클릭할 때 트리거됩니다.
MouseDown 이벤트: 사용자가 마우스 버튼을 누를 때 트리거됩니다.
MouseEnter 이벤트: 마우스가 처음으로 외부에서 요소 범위로 이동할 때 트리거됩니다.
MouseLeave 이벤트: 마우스가 요소 범위 밖으로 이동할 때 트리거됩니다.
MouseMove 이벤트: 마우스 포인터가 요소 내부에서 움직일 때 반복적으로 발생합니다.
MouseOut 이벤트: 마우스 포인터가 요소 위에 있고 사용자가 이를 다른 요소로 이동할 때 시작됩니다.
MouseOver 이벤트: 마우스 포인터가 요소 외부에 있는 후 사용자가 처음으로 다른 요소 경계 내에서 마우스 포인터를 움직일 때 발생합니다.
MouseUp: 사용자가 마우스 포인터를 놓을 때 트리거됩니다.
여러 마우스 좌표 위치:
1. 클라이언트 영역 좌표 위치
마우스 이벤트는 모두 브라우저 뷰포트의 특정 위치에서 발생합니다. 이 위치는 이벤트 개체의 clientX 및 clientY 속성에 저장됩니다.
2. 페이지 좌표 위치
pageX와 pageY는 페이지에서 이벤트가 발생한 위치를 알려줍니다. 즉, 이 두 속성은 페이지의 커서 위치를 나타내므로 좌표는 뷰포트의 왼쪽이나 위쪽 가장자리가 아닌 페이지 자체에서 계산됩니다.
페이지가 스크롤되지 않으면 pageX 및 pageY는 clientX 및 clientY와 동일합니다.
IE8 이하 버전에서는 페이지 좌표 위치를 지원하지 않지만, 클라이언트 영역 좌표 위치와 스크롤 정보를 이용하여 계산할 수 있습니다.
EventUtil.addHandler(document.getElementById("p1"), "click", function (event) { //兼容IE8及之前版本 event = EventUtil.getEvent(event); var pageX = event.pageX, pageY = event.pageY; if (pageX === undefined) { pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if (pageY === undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } //console.log("pageX:" + pageX); //console.log("pageY:" + pageY); });
3. 화면 좌표 위치
screenX 및 screenY 속성은 마우스 이벤트 발생 시 전체 화면을 기준으로 한 마우스 포인터의 좌표 정보를 결정할 수 있습니다.
관련 권장 사항:
일반적인 JavaScript 오류가 발생하기 쉬운 지식 포인트 편집
JavaScript의 이벤트 스트림 및 이벤트 핸들러에 대한 자세한 해석(그래픽 튜토리얼)
위 내용은 일반적인 JavaScript 이벤트 유형의 최신 컬렉션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!