JavaScript 이벤트 학습의 이벤트 스트림, 핸들러 및 객체 요약
1. 이벤트 흐름
이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다.
이벤트 버블링
이벤트는 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 수준을 가진 노드)에 의해 수신된 다음 덜 구체적인 노드(문서)로 위쪽으로 전파됩니다. 다음 HTML 페이지를 예로 들어 보겠습니다. 페이지에서 버튼을 클릭하면 < 버튼>, < 즉, 이벤트 버블링은 이벤트를 트리거한 기본 요소에서 문서 객체로 이벤트가 DOM 트리를 따라 위쪽으로 전파되는 것을 의미합니다.
<html> <head> <title>Test</title> </head> <body> <button id="myBtn">A Btn</button> </body> </html>
이벤트 캡처
이벤트 버블링의 개념과 달리 이벤트 캡처의 개념은 덜 구체적인 노드가 이벤트를 더 일찍 수신하고, 가장 구체적인 노드가 마지막에 이벤트를 수신해야 한다는 것입니다. 위의 예에서는 페이지에서 버튼을 클릭한 후 "클릭" 이벤트가 문서, < 본문>, < 즉, 이벤트 캡처는 이벤트가 문서 객체에서 이벤트의 실제 대상 요소까지 DOM 트리를 따라 아래쪽으로 전파되는 것을 의미합니다.
DOM 이벤트 흐름
"DOM2 수준 이벤트"에서 지정하는 이벤트에는 이벤트 캡처 단계, 대상 단계, 이벤트 버블링 단계의 세 단계가 포함됩니다. 가장 먼저 일어나는 일은 이벤트를 가로챌 수 있는 기회를 제공하는 이벤트 캡처입니다. 그런 다음 실제 대상이 이벤트를 수신합니다. 마지막 단계는 이벤트에 응답할 수 있는 버블링 단계입니다.
이전 버튼 클릭을 예로 들면 DOM 이벤트 흐름에서 캡처 단계 동안 "클릭" 이벤트는 문서에서 시작하여 본문 요소로 전달됩니다. (실제 대상 버튼은 이벤트를 수신하지 않습니다. 캡처 단계 중). 대상 단계에서 버튼 요소는 "클릭" 이벤트를 수신합니다. 마지막으로 버블링 단계에서 이벤트가 문서로 다시 전파됩니다.
2. 이벤트 핸들러
이벤트는 사용자나 브라우저 자체가 수행하는 특정 작업이며, 이벤트에 응답하는 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다.
HTML 이벤트 핸들러
여기서 HTML 이벤트 핸들러는 HTML 요소의 속성을 통해 직접 정의된 이벤트 핸들러를 의미합니다. 아래 코드 예제를 참조하세요. 이 경우 이벤트 핸들러는 요소의 속성 값을 캡슐화하는 함수를 생성하며 이 값은 이벤트의 대상 요소와 동일합니다. 이런 방식으로 이벤트 처리기를 지정하면 몇 가지 단점이 있으므로 권장되지 않습니다.
<button onclick="alert('HaHa~')">Btn-1</button>
<button onclick="alert('event.type')">Btn-2</button>
<button onclick="handler()">Btn-3</button>
<script type="text/javascript">
function handler() {
alert("Haha~");
}
</script>DOM 레벨 0 이벤트 핸들러
JS를 통해 이벤트 핸들러를 지정하는 전통적인 방법은 이벤트 핸들러 속성에 함수를 할당하는 것입니다. 아래 코드 예제를 참조하세요. 이 방식으로 지정된 이벤트 핸들러는 요소의 범위 내에서 실행되며 이는 현재 요소를 참조합니다. 이러한 방식으로 추가된 이벤트 핸들러는 이벤트 흐름의 버블링 단계에서 처리됩니다. 이벤트를 삭제하려면 onclick 값을 공백으로 설정하면 됩니다.
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log("this.id"); // "myBtn"
};
// 删除事件处理程序
btn.onclick = null;DOM2 수준 이벤트 핸들러
"DOM2 수준 이벤트"는 이벤트 핸들러를 지정하고 제거하는 두 가지 메서드인 addEventListener()와 RemoveEventListener()를 정의합니다. 이 두 가지 방법은 모든 DOM 노드에 포함되어 있습니다. 두 메소드 모두 처리할 이벤트, 처리 함수, 부울 값이라는 3개의 매개변수를 받습니다. 최종 부울 값은 true인 경우 캡처 단계에서 이벤트 핸들러가 호출되고, 버블링 단계에서 이벤트 핸들러가 호출되는 경우 false임을 의미합니다. DOM0 수준 메서드와 마찬가지로 여기에 추가된 이벤트 핸들러도 연결된 요소의 범위에서 실행됩니다. DOM2 수준 메서드를 사용하여 이벤트 핸들러를 추가하면 여러 이벤트 핸들러를 추가할 수 있다는 장점이 있습니다. 이러한 이벤트 핸들러는 추가된 순서대로 실행됩니다. 다음은 코드 예시입니다.
var btn = document.getElementById("myBtn");
// 添加，触发点击事件时先输出"myBtn"再输出"HaHa~"
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.addEventListener("click", function() {
console.log("HaHa~");
}, false);addEventListener()를 통해 추가된 이벤트는 RemoveEventListener()를 통해서만 제거할 수 있습니다. 삭제 시 전달된 매개변수는 추가 시 사용된 매개변수와 일치해야 합니다. 이는 addEventListener()를 통해 추가된 익명 함수는 삭제할 수 없음을 의미합니다. 추가 시 전달된 익명 함수는 삭제 시 동일한 함수를 작성하더라도 새 익명 함수일 뿐입니다. 아래 코드 예제를 참조하세요.
var btn = document.getElementById("myBtn");
// 无法删除匿名函数
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.removeEventListener("click", function() {
console.log(this.id);
}, false);
// 正确的添加和删除方式
function handler() {
console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);대부분의 경우 이벤트 핸들러는 다양한 브라우저와의 호환성을 극대화하기 위해 이벤트 흐름의 버블링 단계에 추가됩니다. 이벤트가 대상에 도달하기 전에 이벤트를 가로채야 하는 경우에만 캡처 단계에 이벤트 핸들러를 추가하는 것이 가장 좋습니다. JS 고급 프로그래밍에서는 특별히 필요하지 않은 경우 이벤트 캡처 단계에서 이벤트 핸들러를 등록하지 않는 것이 좋습니다.
IE 이벤트 핸들러
IE实现了与DOM中类似的两个方法: attachEvent()和deleteEvent()。这两个方法接收两个参数，事件处理程序名称和事件处理程序。注意，第一个参数是事件处理程序名称而不是事件名称，也就是说在注册点击事件的处理程序时应该传入”onclick”而不是”click”，这里跟DOM的方法有些差别。另外，这两个方法注册的事件处理程序是在全局作用域中运行而不是元素作用域，this的值指向window。还有一点需要特别小心，通过attachEvent()方法也可以添加多个事件处理程序，但是它们的执行顺序却不是按照它们被添加的顺序，而是完全相反，跟DOM方法截然不同。突然觉得IE真的特别反人类~~~下面是代码示例：
var btn = document.getElementById("myBtn");
function handler1() { // ... }
function handler2() { // ... }
// 添加，触发点击事件时先执行handler2再执行handler1
btn.attachEvent("onclick", handler1);
btn.attachEvent("onclick", handler2);
// 删除
btn.deleteEvent("onclick", handler1);
btn.deleteEvent("onclick", handler2);三、事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入事件处理程序中，无论指定事件处理程序时用的是DOM0还是DOM2的方法，都会传入event对象。event对象只有在事件处理程序执行期间才会存在，一旦事件处理程序执行完毕，event对象就会被销毁。下面是代码示例：
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
console.log(event.type);
}, false);event对象包含与创建它的特定事件有关的属性和方法，触发的事件类型不一样，可用的属性方法也有所不同。但是所有的事件都会有下列的属性或方法：
bubbles: 布尔值，表示事件是否冒泡
cancelable: 布尔值，表示是否可以取消事件的默认行为
currentTarget: 元素，事件处理程序当前正在处理事件的那个元素
defaultPrevented: 布尔值，表示是否调用过preventDefault()方法
detail: 整数，与事件相关的细节信息
eventPhase: 整数，调用事件处理程序的阶段，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
preventDefault(): 函数，取消事件的默认行为，cancelable为true时可以调用该方法
stopImmediatePropagation(): 函数，取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
stopPropagation(): 函数，取消事件的进一步捕获或冒泡，bubbles为true时可以调用这个方法
target: 元素，事件的目标
trusted: 布尔值，为true时表示事件是浏览器生成的，否则表示事件是通过JS创建的
type: 字符串，被触发的事件类型
view: 与事件关联的抽象视图，等同于发生事件的window对象
下面代码示例展示了上述部分属性的用法，也可以帮助我们进一步理解事件流。假设页面中有一个按钮”myBtn”。当点击按钮时，this和currentTarget都等于body元素，因为事件处理程序是注册在body元素上。target的值却等于按钮元素，因为它是click事件的真正目标。由于按钮上没有注册事件处理程序，结果”click”事件冒泡到了document.body那里才得到处理。
document.body.onclick = function(event) {
console.log(event.currentTarget === document.body); // true
console.log(this === document.body); // true
console.log(event.target === document.getElementById("myBtn")); // true
};再看一个例子，下面代码中，stopPropagation()方法取消了事件的进一步捕获或冒泡。当我点击按钮时，本来应该会因为事件冒泡机制触发按钮和body元素上的点击事件处理程序，输出”From Bth …”和”From Body …”。现在点击事件在按钮元素上触发之后就被阻止继续在DOM层次中的传播，因此body上的事件处理程序不会被触发。
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log("From Bth ...");
event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
console.log("From Body ...");
};IE中的事件对象
在IE中，使用DOM0的方法添加事件处理程序时，event对象作为window对象的一个属性存在。如果是通过attachEvent()方法添加，则event对象是作为参数传入事件处理函数。下面是代码示例：
var btn = document.getElementById("myBtn");
btn.onclick = function() {
var event = window.event;
console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
console.log(event.type); // "click"
});IE的event对象同样也包含与创建它的事件相关的属性和方法，这些属性和方法也会因为事件类型的不同而有所差异。但所有事件对象都会包含下列属性：
cancelBubble: 布尔值，可读可写，默认为false。将其设置为true时取消事件冒泡
returnValue: 布尔值，可读可写，默认为true。将其设置为false时取消事件的默认行为
srcElment: 元素，事件的目标元素，与DOM中的target属性相同
type: 字符串，事件类型
在IE中，事件处理程序的作用域是根据指定它的方式来确定，this的值不一定是指向事件的目标元素。因此，使用srcElement属性更具保险。请看下面代码实例，第一种方式中this的值为目标元素，而第二种方式，前面讲过这种方式的事件处理程序是在全局作用域中执行，因此this的值为window。
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
console.log(event.srcElement === this); // false
});위 내용은 JavaScript 이벤트 학습의 이벤트 스트림, 핸들러 및 객체 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7531
15
1379
52
82
11
55
19
21
78
iPhone에서 Google 지도를 기본 지도로 설정하는 방법
Apr 17, 2024 pm 07:34 PM
iPhone의 기본 지도는 Apple의 독점 위치 정보 제공업체인 지도입니다. 지도가 점점 좋아지고 있지만 미국 이외의 지역에서는 잘 작동하지 않습니다. Google 지도와 비교하면 아무것도 제공할 수 없습니다. 이 기사에서는 Google 지도를 사용하여 iPhone의 기본 지도로 만드는 실행 가능한 단계에 대해 설명합니다. iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Google 지도를 휴대전화의 기본 지도 앱으로 설정하는 것은 생각보다 쉽습니다. 아래 단계를 따르십시오. – 전제 조건 단계 – 휴대폰에 Gmail이 설치되어 있어야 합니다. 1단계 – AppStore를 엽니다. 2단계 – “Gmail”을 검색하세요. 3단계 - Gmail 앱 옆을 클릭하세요.
iPhone에 시계 앱이 없습니다. 해결 방법
May 03, 2024 pm 09:19 PM
휴대폰에 시계 앱이 없나요? 날짜와 시간은 iPhone의 상태 표시줄에 계속 표시됩니다. 그러나 시계 앱이 없으면 세계 시계, 스톱워치, 알람 시계 및 기타 여러 기능을 사용할 수 없습니다. 따라서 누락된 시계 앱을 수정하는 것이 해야 할 일 목록의 맨 위에 있어야 합니다. 이러한 솔루션은 이 문제를 해결하는 데 도움이 될 수 있습니다. 수정 1 - 시계 앱 배치 실수로 홈 화면에서 시계 앱을 제거한 경우 시계 앱을 다시 제자리에 배치할 수 있습니다. 1단계 – iPhone을 잠금 해제하고 앱 라이브러리 페이지에 도달할 때까지 왼쪽으로 스와이프합니다. 2단계 – 다음으로 검색창에 “시계”를 검색하세요. 3단계 – 검색 결과 아래에 “시계”가 표시되면 길게 누르고
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
iPhone에서 카메라 및 마이크에 대한 접근을 허용할 수 없습니다
Apr 23, 2024 am 11:13 AM
앱을 사용하려고 할 때 "카메라 및 마이크에 대한 접근을 허용할 수 없습니다"라는 메시지가 표시됩니까? 일반적으로 필요에 따라 특정 사람에게 카메라 및 마이크 권한을 부여합니다. 단, 권한을 거부할 경우 카메라와 마이크가 작동하지 않으며 대신 이런 오류 메시지가 표시됩니다. 이 문제를 해결하는 것은 매우 기본적이며 1~2분 안에 완료할 수 있습니다. 수정 1 – 카메라, 마이크 권한 제공 설정에서 직접 필요한 카메라 및 마이크 권한을 제공할 수 있습니다. 1단계 - 설정 탭으로 이동합니다. 2단계 – 개인 정보 보호 및 보안 패널을 엽니다. 3단계 - 거기에서 "카메라" 권한을 켭니다. 4단계 - 내부에서 휴대폰 카메라에 대한 권한을 요청한 앱 목록을 찾을 수 있습니다. 5단계 - 지정된 앱의 "카메라"를 엽니다.
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
Dec 17, 2023 pm 06:55 PM
주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기
Dec 18, 2023 pm 03:39 PM
인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
