집 >웹 프론트엔드 >JS 튜토리얼 >일반적인 JavaScript 이벤트 유형의 최신 컬렉션

일반적인 JavaScript 이벤트 유형의 최신 컬렉션

php是最好的语言원래의: 2018-08-10 17:21:112426검색

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 이벤트 유형의 최신 컬렉션

관련 기사