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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

20+道必知必会的Vue面试题(附答案解析)20+道必知必会的Vue面试题(附答案解析)Apr 06, 2021 am 09:41 AM

本篇文章整理了20+Vue面试题分享给大家,同时附上答案解析。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.