자바스크립트에서 일반적으로 사용되는 이벤트는 무엇입니까?-프런트엔드 Q&A-php.cn

자바스크립트에서 일반적으로 사용되는 이벤트는 무엇입니까?

青灯夜游

풀어 주다： 2022-02-21 17:37:05

원래의

13078명이 탐색했습니다.

JavaScript의 일반적인 이벤트는 다음과 같습니다. 1. 클릭 이벤트(onclick 및 ondblclick) 2. 포커스 이벤트(onblur 및 onfocus) 4. 마우스 이벤트 6. 선택 7. 이벤트를 변경합니다.

자바스크립트에서 일반적으로 사용되는 이벤트는 무엇입니까?

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

JS의 이벤트:

개념: 특정 구성 요소가 특정 작업을 수행한 후 특정 코드의 실행을 트리거합니다.
이벤트: 특정 작업. 예: 클릭, 더블 클릭, 키보드 누름, 마우스 이동
이벤트 소스: 구성 요소. 예: 버튼 텍스트 입력 상자...
리스너: 코드.
청취 등록: 이벤트, 이벤트 소스 및 청취자를 결합합니다. 이벤트 소스에서 이벤트가 발생하면 리스너 코드의 실행이 트리거됩니다.

1. 일반 이벤트

1) 클릭 이벤트:

onclick: 클릭 이벤트
ondblclick: 더블 클릭 이벤트

2) 포커스 이벤트

onblur: 포커스 상실
onfocus: 요소 획득 집중하다.

3) 로딩 이벤트:

onload: 페이지나 이미지가 로딩됩니다.

4) 마우스 이벤트:

onmousedown 마우스 버튼을 눌렀습니다.
onmouseup 마우스 버튼이 풀렸습니다.
onmousemove 마우스가 움직입니다.
onmouseover는 요소 위로 마우스를 이동합니다.
onmouseout 마우스가 요소에서 멀어집니다.

5) 키보드 이벤트:

onkeydown 특정 키보드 키가 눌렸습니다.
onkeyup 키보드 키가 해제되었습니다.
onkeypress 키보드 키를 눌렀다 놓습니다.

6) 이벤트 선택 및 변경

onchange 필드의 내용이 변경됩니다.
onselect 텍스트가 선택되었습니다.

7) 양식 이벤트:

제출 확인 버튼이 클릭되었습니다.
onreset 재설정 버튼을 클릭했습니다.

2. 이벤트 등록

3.1. 이벤트 등록(바인딩)이란?

실제로는 이벤트가 응답할 때 어떤 작업 코드를 실행할지 브라우저에 알려주는데, 이를 이벤트 등록 또는 이벤트 바인딩이라고 합니다.

3.2. 이벤트를 등록하는 두 가지 방법(정적 등록 이벤트, 동적 등록 이벤트)

정적 등록 이벤트: 여기서는 html 태그의 이벤트 속성을 이벤트 응답 후 코드에 직접 할당합니다. 우리는 이것을 정적 등록이라고 부릅니다.

function sayHello() {
    alert("hello js!");
}
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到钮上，等待click事件发生之后，
该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>

로그인 후 복사

동적 등록 이벤트: 먼저 js 코드를 통해 레이블의 dom 개체를 가져온 다음 dom 개체를 통해 이벤트 응답 후 코드에 할당하는 것을 말합니다. 이벤트 이름=함수(){} 이 형식은 동적 등록이라고 합니다.

동적 등록을 위한 기본 단계:

1. 라벨 객체 가져오기

2. 라벨 객체.이벤트 이름 = fucntion(){}

<!--第二种注册事件的方式，是使用纯JS代码完成事件的注册。-->
<input type="button" value="hello1" id="mybtn1"/>
<input type="button" value="hello2" id="mybtn2"/>
<input type="button" value="hello3" id="mybtn3"/>

<script type="text/javascript">
    function dynamic(){
        alert("动态注册事件1");
    }
    // 第一步:先获取这个钮对象()
    /*
        document:是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ), document是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ),
        get: 获 取
        Element:元 素 （ 就 是 标 签 
        By:通 过 。 。 由 。 。 经 。 。 。
        Id: id 属 性
        getElementById: 通 过 id 属 性 获 取 标 签 对
    */
    var btnobj1 = document.getElementById("mybtn1");
    // 第二步:给钮对象的onclick属性赋值
    btnobj1.onclick = dynamic;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
                                // 这行代码的含义是,将回调函数doSome注册到click事件上.

    var btnobj2 = document.getElementById("mybtn2");
    btnobj2.onclick = function(){// 这个函数没名字,叫做匿名函数,这个匿名函数也是一个回调函数.
        alert("动态注册事件2");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
    }

    document.getElementById("mybtn3").onclick = function () {
        alert("动态注册事件3");
    }
</script>

로그인 후 복사

키다운을 통해 Enter 키 13과 ESC 키 27을 시연합니다. event

<body>
<script type="text/javascript">
    // 回车键的键值是13
    // ESC键的键值是27
    window.onload = function () {
      /*  var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            // 获取键值对象
            alert(event);// 什么键显示都为[object KeyboardEvent]
            // 对于“键盘事件对象"来说,都keyCode属性用来获取键值.
            alert(event.keyCode);//回车键显示13
        }
*/
        var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            if(event.keyCode == 13){
                alert("正在进行验证")
            }
        }
    }
</script>

<input type="text" id="key"/>

</body>

로그인 후 복사

【관련 추천: 자바스크립트 학습 튜토리얼】

위 내용은 자바스크립트에서 일반적으로 사용되는 이벤트는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!