집 > 기사 > 웹 프론트엔드 > JavaScript의 이벤트 유형은 무엇입니까?

JavaScript의 이벤트 유형은 무엇입니까?

青灯夜游원래의: 2021-07-16 16:19:404068검색

Javascript 이벤트 유형에는 UI 이벤트, 포커스 이벤트, 마우스 및 휠 이벤트, 키보드 및 텍스트 이벤트, 복합 이벤트, 변경 이벤트, HTML5 이벤트, 장치 이벤트, 터치 및 제스처 이벤트 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 이벤트 유형

웹 브라우저에서 발생할 수 있는 이벤트 유형은 다양합니다. 여기에서는 주로 다음과 같은 일반적으로 사용되는 이벤트 유형에 중점을 둘 것입니다.

UI 이벤트
포커스 이벤트
마우스 및 휠 이벤트
키보드 및 텍스트 이벤트
복합 이벤트
Change 이벤트
HTML5 이벤트
장치 이벤트
터치 및 제스처 이벤트

1부: UI 이벤트

　UI 이벤트의 UI는 (사용자 인터페이스, 사용자 인터페이스)이며, 사용자가 페이지 사우나의 요소와 상호 작용할 때 트리거됩니다.

　UI 이벤트에는 주로 로드, 언로드, 중단, 오류, 선택, 크기 조정, 스크롤 이벤트가 포함됩니다.

1.load 이벤트

　 이 이벤트는 페이지가 완전히 로드되면(모든 이미지, js 파일, CSS 파일 및 기타 외부 리소스 포함) 창의 로드 이벤트가 트리거됩니다.

　　이 이벤트는 JavaScript에서 가장 일반적으로 사용되는 이벤트입니다. 예를 들어 페이지가 완전히 로드된 후 함수를 실행하는 window.onload=function(){};을 자주 사용합니다.

　 게다가 이 이벤트가 아래와 같이 이미지 요소 등 다른 요소에도 사용될 수 있다는 사실을 이전에는 전혀 몰랐습니다.

<img src="smile.png" onload="alert(&#39;loaded&#39;)">

　　이미지가 완전히 로드되면 팝업 창이 나타납니다. 물론 아래와 같이 JS를 사용하여 구현할 수도 있습니다.

var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
      event=EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

2.unload 이벤트

　분명히 이 이벤트는 로드 이벤트와 반대입니다. 문서가 완전히 언로드된 후 트리거됩니다. 사용자가 한 페이지에서 다른 페이지로 전환할 때 언로드 시간이 트리거됩니다. 이 이벤트의 가장 일반적인 사용 사례는 메모리 누수를 방지하기 위한 명확한 참조입니다.

　 이 이벤트도 지정하는 방법이 2가지 있습니다. 하나는 EventUtil.addHandler()를 사용하는 JavaScript 방법이고, 다른 하나는 body 요소에 기능을 추가하는 것입니다.

onload 이벤트에 코드를 작성할 때 주의해야 할 점은 페이지가 언로드된 후에 트리거되기 때문에 페이지가 로드된 후 존재하는 객체가 반드시 이후에 존재하는 것은 아니기 때문입니다. onload가 실행되었습니다!

<body onload="alert(&#39;changed&#39;)">

3. 크기 조정 이벤트

　　 브라우저 창이 새로운 너비나 높이로 조정되면 크기 조정 이벤트가 실행됩니다. 이 이벤트는 창에서 트리거됩니다. 따라서 핸들러는 JS나 body 요소의 onresize 속성을 통해 지정할 수도 있습니다. 　

<body onresize="alert(&#39;changed&#39;)">

　 이 코드를 작성하면 브라우저의 크기가 바뀔 때 창이 뜹니다.

4.scroll event

이 이벤트는 문서가 스크롤되는 동안 반복적으로 발생하므로 이벤트 핸들러의 코드는 최대한 단순하게 유지되어야 합니다.

2부: 포커스 이벤트

포커스 이벤트는 페이지 요소가 포커스를 얻거나 잃을 때 트리거됩니다. 주로 다음과 같은 유형이 있습니다.

blur는 요소가 초점을 잃을 때 트리거됩니다. 이 이벤트는 버블링되지 않으며 모든 브라우저에서 지원됩니다.
focus는 요소가 포커스를 받으면 트리거됩니다. 이 이벤트는 버블링되지 않으며 모든 브라우저에서 지원됩니다.
focusin은 요소가 포커스를 얻을 때 트리거됩니다. 이 버블 이벤트는 일부 브라우저에서 지원되지 않습니다.
focusout은 요소가 포커스를 잃을 때 트리거됩니다. 이 이벤트 버블링은 일부 브라우저에서 지원되지 않습니다.

참고: 흐림 효과와 초점이 버블링되지 않더라도 캡처 단계에서 소리가 들릴 수 있습니다.

3부: 마우스 및 휠 이벤트

마우스 이벤트는 웹 개발에서 가장 일반적으로 사용되는 이벤트입니다. 마우스가 주요 위치 지정 장치이기 때문입니다.

click---用户单击鼠标左键或按下回车键触发
dbclick---用户双击鼠标左键触发。
mousedown---在用户按下了任意鼠标按钮时触发。
mouseenter---在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。
mouseleave---元素上方的光标移动到元素范围之外时触发。不冒泡。
mousemove---光标在元素的内部不断的移动时触发。
mouseover---鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。
mouseout---用户将光标从一个元素上方移动到另一个元素时触发。
mouseup---在用户释放鼠标按钮时触发。

　　注意到：上述所有事件除了mouseenter和mouseleave外都冒泡。

　　重要：只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。同样，只有在同一个元素上触发两次click事件，才会触发dbclick事件。

dbclick事件的产生过程如下：

mousedown
mouseup
click
mousedown
mouseup
click
dbclick

上面介绍了有关鼠标的事件，下面介绍一些对于鼠标光标的位置：客户区坐标位置、页面坐标位置、屏幕坐标位置

一、客户区坐标位置

　　通过客户区坐标可以知道鼠标是在视口中什么位置发生的。

　　clientX和clientY分别表示鼠标点击的位置。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。这两个都是event的属性。举例如下：

    <button id="clickMe">点我</button>
    <script>
        var button=document.getElementById("clickMe");
        button.onclick=function(event){
            alert(event.clientY+""+event.clientX);
        };    
     </script>

　　当我点击按钮的左上角时，显示为00。效果如下：

二.页面坐标位置

　　和客户区坐标位置不同，页面坐标位置表示鼠标光标在页面而非视口中的位置。因此坐标是从页面本身而非视口的左边和顶边计算的。如果前面的话不能很好的理解，接着看这里：在页面没有滚动的情况下，页面坐标位置和客户区坐标位置是相同的。

　　页面坐标

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面坐标位置</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 800px;
            height: 1200px;
            /*我的电脑的视口高度为960px；*/
            background: #ccc;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="button"> 点击我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            alert("pageX为"+event.pageX+"pageY为"+event.pageY);
        };
    </script>
</body>
</html>

在上面的例子中，我把div的高设置为了1200px；而我的浏览器视口高度为960px；所以一定需要滚动我们才能点击按钮，最终得到的结果是：pageX为13pageY为1210。

然而IE8及更早的浏览器是不支持事件对象上的页面坐标的，即不能通过pageX和pageY来获得页面坐标，这时需要使用客户区坐标和滚动信息来计算了。而滚动信息需要使用document.body(混杂模式)、document.documentElement(标准模式)中的scrollLeft和scrollTop属性。举例如下：

<button id="button"> 点击我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
            var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight);
            alert("pageX为"+pageX+"pageY为"+pageY);
        };
    </script>

此例子在IE浏览器下可得到同样结果。

三.屏幕坐标位置

　　与前两者又有所不同，鼠标事件发生时，还有一个光标相对于整个电脑屏幕的位置。通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的位置。举例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面坐标位置</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

    </style>
</head>
<body>
    <button id="button"> 点击我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            alert("X为："+event.screenX+"Y为："+event.screenY);
        };
    </script>
</body>
</html>

最终的结果如下：

显然screenX和screenY是相对于屏幕的左方和上方的。

四.修改键

　　当点击某个元素时，如果我们同时按下了ctrl键，那么事件对象的ctrlKey属性值将为true，否则为false，对于alt、shift、meta（windows键盘的windows键、苹果机的Cmd键）的事件属性altKey、shiftKey、metaKey同样如此。下面举例如下：

<button id="button"> 点击我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            var array=new Array();
            if(event.shiftKey){
                array.push("shift");
            }
            if(event.ctrlKey){
                array.push("ctrl");
            }
            if(event.altKey){
                array.push("alt");
            }
            if(event.metaKey){
                array.push("meta");
            }
            alert(array.join(","));
        };
    </script>

这个例子中，我首先创建了一个array数组，接着如果我按下了那几个键，就会存入相应的名称。这里我同时按下了四个键，结果如下：

即最终将数组中的四个值拼接成了字符串显示出来。

五、相关元素

    be83eb51f340b921e483a6b46a36fe5f 点击我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a        var button=document.getElementById("button");
        button.onmouseup=function(){
            alert(event.button);
        };    2cacc6d41bbb37262a98f745aa00fbf0

　　当我是用左键产生mousedown事件时，弹出窗口为0，中间键为1，右键为2。

六、鼠标滚轮事件

    3f1c4e4b6b16bbbd69b2ee476dc4f83a
        document.onmousewheel=function(){
            alert(event.wheelDelta);
        };
    2cacc6d41bbb37262a98f745aa00fbf0

当我向下滚动滚轮时，效果如下：

第四部分：键盘和文本事件

该部分主要有下面几种事件：

keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。

这几个事件在用户通过文本框输入文本时才最常用到。

键盘事件：

document.addEventListener("keydown",handleKeyDownClick,false);

        function handleKeyDownClick(event) {
            var e = event||window.event||arguments.callee.caller.arguments[0];
            if (e&&e.keyCode == 13) {
                alert("keydown");
            }
        }

【推荐学习：javascript高级教程】

위 내용은 JavaScript의 이벤트 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 css Array select Error 字符串指针 Interface Event JS function 对象事件鼠标事件键盘事件 windows ui

성명：

이전 기사：어떤 유형의 자바스크립트 루프 문이 있나요?다음 기사：어떤 유형의 자바스크립트 루프 문이 있나요?