JavaScript 이벤트 스트림과 이벤트 핸들러가 무엇인지 자세히 설명합니다.
JS와 HTML 간의 상호작용은 이벤트를 통해 이루어집니다. 이벤트는 문서나 브라우저 창 내에서 발생하는 특정 상호 작용 순간입니다. 이벤트가 발생할 때 적절한 코드가 실행되도록 리스너(또는 핸들러)를 사용하여 이벤트를 예약할 수 있습니다. 전통적인 소프트웨어 엔지니어링에서 관찰자 패턴으로 알려진 이 패턴은 페이지 동작과 페이지 모양 간의 느슨한 결합을 지원합니다.
이벤트 흐름
이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다.
이벤트 버블링
이벤트는 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 수준을 가진 노드)에 의해 수신된 다음 덜 구체적인 노드(문서)로 위쪽으로 전파됩니다. 다음 HTML 페이지를 예로 들어 보겠습니다. 페이지에서 버튼을 클릭하면 < 버튼>, < 즉, 이벤트 버블링은 이벤트를 트리거한 기본 요소에서 문서 객체로 이벤트가 DOM 트리를 따라 위쪽으로 전파되는 것을 의미합니다.
<html> <head> <title>Test</title> </head> <body> <button id="myBtn">A Btn</button> </body> </html>
이벤트 캡처
이벤트 버블링의 개념과 달리 이벤트 캡처의 개념은 덜 구체적인 노드가 이벤트를 더 일찍 수신하고 가장 구체적인 노드가 이벤트를 마지막에 수신해야 한다는 것입니다. . 위의 예에서는 페이지에서 버튼을 클릭한 후 "클릭" 이벤트가 문서, < 본문>, < 즉, 이벤트 캡처는 이벤트가 문서 객체에서 이벤트의 실제 대상 요소까지 DOM 트리를 따라 아래쪽으로 전파되는 것을 의미합니다.
DOM 이벤트 흐름
"DOM 레벨 2 이벤트"에서 지정하는 이벤트에는 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 단계가 포함됩니다. 가장 먼저 일어나는 일은 이벤트를 가로챌 수 있는 기회를 제공하는 이벤트 캡처입니다. 그런 다음 실제 대상이 이벤트를 수신합니다. 마지막 단계는 이벤트에 응답할 수 있는 버블링 단계입니다.
여전히 이전 버튼 클릭을 예로 들면 DOM 이벤트 흐름에서 캡처 단계 동안 "클릭" 이벤트는 문서에서 시작하여 본문 요소로 전달됩니다(실제 대상 버튼은 수신되지 않습니다). 캡처 단계 중 이벤트). 대상 단계에서 버튼 요소는 "클릭" 이벤트를 수신합니다. 마지막으로 버블링 단계에서 이벤트가 문서로 다시 전파됩니다.
이벤트 핸들러
이벤트는 사용자나 브라우저 자체가 수행하는 특정 작업이며, 이벤트에 응답하는 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다.
HTML 이벤트 핸들러
여기서 HTML 이벤트 핸들러는 속성(attribute)을 통해 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);
위 내용은 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)

뜨거운 주제











1. 먼저 작업 표시줄의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 [작업 관리자] 옵션을 선택하거나, 시작 로고를 마우스 오른쪽 버튼으로 클릭한 후 [작업 관리자] 옵션을 선택합니다. 2. 열린 작업 관리자 인터페이스에서 맨 오른쪽에 있는 [서비스] 탭을 클릭합니다. 3. 열린 [서비스] 탭에서 아래의 [서비스 열기] 옵션을 클릭하세요. 4. 열리는 [서비스] 창에서 [InternetConnectionSharing(ICS)] 서비스를 마우스 오른쪽 버튼으로 클릭한 후 [속성] 옵션을 선택하세요. 5. 열리는 속성 창에서 [연결 프로그램]을 [사용 안 함]으로 변경하고 [적용]을 클릭한 후 [확인]을 클릭하세요. 6. 시작 로고를 클릭한 후 종료 버튼을 클릭하고 [다시 시작]을 선택한 후 컴퓨터를 다시 시작합니다.

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우십시오. 데이터 분석 및 처리의 지속적인 개발로 인해 CSV 형식은 널리 사용되는 파일 형식 중 하나가 되었습니다. CSV 파일은 다양한 데이터 필드가 쉼표로 구분되어 있는 간단하고 읽기 쉬운 텍스트 파일입니다. 학술 연구, 비즈니스 분석, 데이터 처리 등 CSV 파일을 열고 처리해야 하는 상황에 자주 직면하게 됩니다. 다음 가이드는 CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우는 방법을 보여줍니다. 1단계: CSV 파일 형식 이해하기 먼저,

PHP 개발 과정에서 특수 문자를 처리하는 것은 일반적인 문제이며, 특히 문자열 처리에서는 특수 문자가 이스케이프되는 경우가 많습니다. 그중에서도 특수 문자를 작은따옴표로 변환하는 것은 상대적으로 일반적인 요구 사항입니다. 왜냐하면 PHP에서는 작은따옴표가 문자열을 래핑하는 일반적인 방법이기 때문입니다. 이 기사에서는 PHP에서 특수 문자 변환 작은따옴표를 처리하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. PHP에서 특수 문자에는 작은따옴표('), 큰따옴표("), 백슬래시() 등이 포함되지만 이에 국한되지는 않습니다.

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.

우리가 사용하는 운영 체제가 win7인 경우 일부 친구는 업그레이드할 때 win7에서 win10으로 업그레이드하지 못할 수도 있습니다. 편집자는 문제가 해결될 수 있는지 확인하기 위해 다시 업그레이드를 시도해 볼 수 있다고 생각합니다. 자세한 내용은 편집자가 어떻게 했는지 살펴보겠습니다~ win7이 win10으로 업그레이드하지 못한 경우 방법 1: 1. 먼저 드라이버를 다운로드하여 컴퓨터를 Win10으로 업그레이드할 수 있는지 평가하는 것이 좋습니다. 업그레이드 후 드라이버 테스트를 이용하여 드라이버에 이상이 있는지 확인하고 원클릭으로 수정하세요. 방법 2: 1. C:\Windows\SoftwareDistribution\Download 아래의 모든 파일을 삭제합니다. 2.win+R 실행 "wuauclt.e

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.
