JavaScript 이벤트 사용에 대한 간략한 분석

이 기사의 예에서는 JavaScript 이벤트의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

JavaScript는 이벤트를 통해 HTML과 상호 작용합니다.

이벤트 흐름

이벤트 흐름은 이벤트의 트리거 규칙과 순서를 지정합니다. DOM2는 이벤트 흐름이 이벤트 캡처 -> 대상 트리거링 -> 이벤트 버블링의 세 단계를 포함한다고 규정합니다. DOM2에서는 이벤트 캡처 단계에서 이벤트 핸들러를 호출하면 안 된다고 규정하고 있지만 주요 브라우저에서는 이를 지원하지 않습니다. DOM2 수준 이벤트 핸들러 작업 함수 쌍의 세 번째 매개변수인 addEventListener 및 RemoveEventListener는 이를 DIY로 전환합니다. 이는 초보자가 DOM 관리가 엉망이라고 생각하게 만듭니다.

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

위 js의 addEventListener 및 RemoveEventListener의 세 번째 매개변수를 false로 업데이트하면 효과를 대략적으로 이해할 수 있습니다. 이벤트 흐름.

이벤트

이벤트는 사용자나 브라우저 자체에 의해 수행되는 특정 작업입니다.

이벤트 핸들러 추가 방법

이벤트에 응답하는 함수를 이벤트 핸들러라고 합니다.

다음 방법으로 이벤트 핸들러를 지정합니다.

HTML 속성 지정.

요소가 이벤트를 지원하는 경우 해당 HTML 속성이 있으며 이 속성을 사용하여 이벤트 핸들러를 추가할 수 있습니다.

<button id="btn" onclick="alert(&#39;button click&#39;)">button</button>

DOM 레벨 0. 요소의 이벤트 핸들러 속성에 함수 할당: 이는 JavaScript를 사용하여 이벤트 핸들러를 지정하는 전통적인 방법이며 오늘날에도 여전히 사용됩니다.

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

DOM 레벨 2.

addEventListener 및 RemoveEventListener를 통해 요소 이벤트를 관리합니다. 모든 DOM 노드에는 이 두 가지 메소드가 포함되어 있으며 둘 다 add 3개의 매개변수를 포함합니다.

addEventListener(이벤트 이름, 이벤트 처리 함수, 이벤트 캡처 시 이벤트 핸들러 실행 여부)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

위 코드에서 동일한 객체를 가리키는 참조는 동일한 선언으로 동일한 모양의 두 객체를 생성하지만 저장됩니다. 힙에 다른 위치에 있는 다른 개체.

이벤트 객체

DOM에서 이벤트가 발생하면 이벤트 객체 이벤트가 생성됩니다. 어떤 이벤트 핸들러를 지정하든 이벤트 객체가 전달됩니다. 정확히 말하면 실행 함수 호출의 실행 환경에서 이벤트 객체가 생성되는 방식을 볼 수 있습니다. 그것은 전달됩니다.

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

이벤트에는 액세스 이벤트를 제어하는 ​​리치 멤버가 포함되어 있습니다. 다음은 모든 이벤트의 공통 멤버입니다.

target: 이벤트를 발생시키는 액션이 ​​직접적으로 작용하는 타겟 요소입니다.
currentTarget: 이와 동일하며 이벤트 핸들러가 작동하는 요소입니다.
eventPhase: 이벤트 핸들러가 호출될 때 이벤트 흐름의 단계입니다. 세 가지 값 1, 2, 3은 각각 이벤트 흐름의 세 단계에 해당합니다.
유형: 이벤트 유형. 클릭 이벤트는 문자열: "click"에 해당합니다.

이벤트 유형

이벤트 유형은

UI 이벤트로 구분됩니다.
포커스 이벤트.
마우스와 휠 이벤트.
키보드 및 텍스트 이벤트.
복합이벤트.
이벤트 변경.
HTML5 이벤트.
기기 이벤트.
터치 및 동작 이벤트.