DOM 이벤트 스테이지 및 이벤트 캡처 및 이벤트 버블링 실행 순서(자세한 그래픽 및 텍스트 설명)_jquery
좋은 기억력은 나쁜 펜만큼 좋지 않다는 말이 있듯이, 많은 기술 기사를 철저하게 이해하지 않으면 기술적인 요점을 빨리 잊어버리게 됩니다. 편집자는 주로 찾아보고, 여러분과 공유하기 위해 제가 정리한 메모를 작성합니다.
개발 과정에서 우리 모두는 다른 사람들의 성숙한 프레임워크를 사용하기를 희망합니다. 왜냐하면 거인의 어깨에 서는 것이 개발 효율성을 크게 향상시키기 때문입니다. 그러나 우리는 그 기본 원칙도 이해해야 하며, 이해해야 합니다. 예를 들어 DOM 이벤트의 경우 jquery 프레임워크는 다양한 브라우저의 다양한 동작을 캡슐화하고 추상화하여 이벤트 처리에 큰 편의를 제공합니다. 그러나 브라우저는 점차 통일되고 표준화되고 있으며, 공식적으로 표준화된 인터페이스를 보다 안전하게 사용할 수 있습니다. 많은 개발자의 마음과 정신을 얻어야만 브라우저가 더 발전할 수 있기 때문입니다. 특정 페이지를 열 때 낮은 버전의 브라우저를 사용할 때와 마찬가지로 해당 페이지에 액세스하려면 Chrome과 같은 고급 브라우저를 사용하라는 메시지가 표시됩니다. 그러나 이것은 혁명적인 과정입니다. 우리의 웹페이지가 더 많은 사람들에게 더 나은 서비스를 제공하기 위해서는 이제 이러한 역사적 문제와 더 잘 호환되어야 합니다. 호환되기 위해서는 프레임워크에 의존하는 것 외에도 프레임워크의 기본 원칙을 이해해야 합니다.
3단계 DOM 이벤트
DOM 이벤트가 트리거되면 단순히 객체 자체에서 한 번만 트리거되는 것이 아니라 세 가지 단계를 거칩니다.
1. 캡처 단계: 먼저 문서의 루트 노드 문서에서 이벤트 트리거 개체로 이동하여 외부에서 이벤트 개체를 캡처합니다.
2. 대상 스테이지 : 대상 이벤트 장소(사건이 발생한 장소)에 도착하여 이벤트를 발동합니다
3. 버블 단계 : 그런 다음 대상 이벤트 위치에서 문서의 루트 노드까지 역추적하고 이벤트 개체를 안쪽에서 바깥쪽으로 버블링합니다.
http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
이벤트 캡처와 이벤트 버블링의 순서는 명백합니다.실험부분
온라인 편집기 열기:
http://jsbin.com/goqede/edit?html,css,js,output
코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Document</title>
<style>
#outer{
text-align: center;
width: px;
height: px;
background-color: #ccc;
margin: auto;
}
#middle{
width: px;
height: px;
background-color: #f;
margin: auto;
}
#inner{
width: px;
height: px;
background-color: #f;
margin: auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>
외부_캡쳐
중간_캡쳐
내부_캡처
내부_거품
중간 버블
외부 버블
이벤트 요소에 도달할 때까지 먼저 외부에서 내부로 이벤트가 캡처된 다음 내부에서 루트 노드까지 버블링되는 것을 볼 수 있습니다
팁:
대상 단계에서 이벤트가 발생하면 이벤트 등록 순서에 따라 실행됩니다. 다른 두 단계의 등록 순서는 이벤트 실행 순서에 영향을 미치지 않습니다. 즉, 여기에 버블링 이벤트와 캡처 이벤트를 모두 등록하면 등록된 순서대로 실행됩니다.
, 
위 내용은 본 글의 DOM 이벤트 스테이지와 이벤트 캡처 및 이벤트 버블링의 실행 순서입니다(상세 사진 및 텍스트). 모든 분들의 향후 작업과 학습에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
JavaScript의 공통 이벤트 버블링 메커니즘을 마스터하세요.
Feb 19, 2024 pm 04:43 PM
JavaScript의 일반적인 버블링 이벤트: 일반적인 이벤트의 버블링 특성을 익히려면 특정 코드 예제가 필요합니다. 소개: JavaScript에서 이벤트 버블링은 이벤트가 전파될 때까지 가장 깊은 중첩 수준을 가진 요소에서 외부 요소로 전파되는 것을 의미합니다. 가장 바깥쪽 부모 요소입니다. 일반적인 버블링 이벤트를 이해하고 마스터하면 사용자 상호 작용 및 이벤트 처리를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 독자가 더 잘 이해할 수 있도록 몇 가지 일반적인 버블링 이벤트를 소개하고 특정 코드 예제를 제공합니다. 1. 클릭 이벤트(클릭
어떤 JS 이벤트가 위쪽으로 전파되지 않습니까?
Feb 19, 2024 am 08:17 AM
어떤 JS 이벤트가 버블링되지 않습니까? JavaScript에서 이벤트 버블링은 요소가 이벤트를 트리거할 때 이벤트가 문서 루트 노드에 버블링될 때까지 상위 수준 요소까지 버블링되는 것을 의미합니다. 그런 다음 이벤트 핸들러는 버블링된 순서대로 실행됩니다. 그러나 모든 이벤트가 버블링되는 것은 아닙니다. 일부 이벤트는 상위 수준 요소로 버블링되지 않고 트리거된 후 대상 요소에서만 이벤트 핸들러를 실행합니다. 버블링되지 않는 몇 가지 일반적인 이벤트는 다음과 같습니다. 초점 및 흐림 이벤트:
동일한 이벤트가 버블링을 두 번 트리거하는 이유는 무엇입니까?
Feb 19, 2024 pm 10:34 PM
왜 동일한 버블링 이벤트가 두 번 발생합니까? 이벤트 버블링은 브라우저의 일반적인 이벤트 전달 메커니즘입니다. 요소가 이벤트를 트리거하면 해당 이벤트는 문서의 루트 요소로 전달될 때까지 트리거된 요소에서 상위 요소로 순서대로 전달됩니다. 이 과정은 마치 물 속에서 거품이 터지는 것과 같아서 이벤트 버블링이라고 합니다. 그러나 때때로 동일한 버블링 이벤트가 두 번 발생하는 경우가 있습니다. 이유는 무엇입니까? 두 가지 주요 이유는 이벤트 등록과 이벤트 처리입니다. 먼저, 이벤트가 발생했음을 분명히 해야 합니다.
캡처를 먼저 할까요, 버블을 먼저 할까요? 이벤트 프로세스의 장단점 분석
Feb 21, 2024 pm 02:36 PM
캡처를 먼저 할까요, 버블을 먼저 할까요? 이벤트 프로세스의 장단점 분석 이벤트 프로세스는 웹 개발에 있어서 이벤트의 발생부터 처리까지의 과정을 기술하는 중요한 개념입니다. 이벤트를 처리할 때 두 가지 주요 프로세스 모델이 있습니다. 캡처 다음 버블, 버블 다음 캡처입니다. 이 두 모델은 서로 다른 시나리오에서 장점과 단점이 있으므로 실제 상황에 따라 적절한 모델을 선택해야 합니다. 먼저 캡처한 다음 버블링한다는 것은 이벤트 버블링 단계 전에 이벤트 캡처 단계가 실행된다는 의미입니다. 이벤트 캡처 단계는 이벤트 대상의 루트 노드에서 시작하여 대상 요소에 도달할 때까지 단계별로 전달됩니다.
클릭 이벤트의 버블링 메커니즘과 웹 페이지 상호 작용에 미치는 영향
Jan 13, 2024 pm 02:34 PM
클릭 이벤트 버블링의 역할과 웹 페이지 상호 작용에 미치는 영향 웹 개발에서 이벤트는 상호 작용을 구현하고 사용자 작업에 응답하는 핵심입니다. 그 중에서 이벤트 버블링은 중첩된 요소 계층 구조의 이벤트가 동시에 여러 요소에 의해 응답되도록 하는 일반적인 이벤트 메커니즘입니다. 이 기사에서는 클릭 이벤트 버블링의 역할과 이것이 웹 페이지 상호 작용에 미치는 영향을 자세히 설명하고 몇 가지 구체적인 코드 예제를 제공합니다. 1. 클릭 이벤트 버블링의 개념 클릭 이벤트 버블링(ClickEvent Bubbling)은 요소가
MacBook Pro에서 스크린샷을 찍는 방법
Jul 19, 2023 pm 07:53 PM
이 가이드는 MacBook Pro에서 스크린샷을 찍기 위해 수행해야 할 작업을 보여줍니다. MacBook은 세련된 디자인과 강력한 성능으로 잘 알려져 있지만, 이러한 강력한 노트북에는 종종 간과되는 편리한 기능이 많이 포함되어 있습니다. 기능 중 하나는 스크린샷 캡처를 위한 내장 도구입니다. 이 문서에서는 전체 화면을 캡처하든, 화면의 특정 부분만 캡처하든 관계없이 MacBook Pro에서 스크린샷을 찍는 방법을 단계별로 안내합니다. 스크린샷이란 무엇인가요? 스크린샷이라고도 하는 스크린샷은 화면에 표시되는 항목을 기록하기 위해 컴퓨터나 모바일 장치로 촬영한 디지털 이미지입니다. 스크린샷은 일반적으로 파일로 쉽게 저장할 수 없는 이미지나 텍스트 기록을 생성하거나, 화면 보기를 다른 사람과 공유하거나, 다음과 같은 가이드 및 튜토리얼을 생성하는 데 사용됩니다.
예외 처리: PHP에서 예외를 포착하고 처리하는 방법은 무엇입니까?
Dec 18, 2023 pm 12:52 PM
예외 처리: PHP에서 예외를 포착하고 처리하는 방법은 무엇입니까? PHP 개발에서 예외 처리는 매우 중요한 부분입니다. 프로그램에 예상치 못한 상황이나 오류가 발생할 경우, 예외를 포착하고 처리하여 프로그램이 정상적으로 작동하는지 확인해야 합니다. PHP는 일련의 예외 처리 메커니즘을 제공합니다. 이 기사에서는 PHP에서 예외를 포착하고 처리하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. PHP 예외의 기본 개념 PHP에서 예외란 프로그램 실행 중에 발생하는 오류, 경고, 치명적인 오류 등의 비정상적인 상황을 의미합니다.
클릭 이벤트 버블링을 살펴보고 프런트엔드 개발의 주요 원칙을 숙지하세요.
Jan 13, 2024 am 10:56 AM
프런트엔드 개발의 클릭 이벤트 버블링 및 마스터 키 개념을 학습합니다. 구체적인 코드 예제가 필요합니다. 프런트엔드 개발은 오늘날 인터넷 시대의 중요한 분야이며, 이벤트 버블링은 프런트엔드 개발의 핵심 개념 중 하나입니다. 효율적인 프런트 엔드 코드를 작성하려면 이벤트 버블링을 이해하고 마스터하는 것이 중요합니다. 이 글에서는 이벤트 버블링이 무엇인지, 프론트엔드 개발에서 이벤트 버블링 개념을 어떻게 활용하는지 소개하겠습니다. 1. 이벤트 버블링이란 무엇입니까? 이벤트 버블링은 요소에 대한 이벤트가 트리거될 때 가장 안쪽 요소부터 시작하여 단계적으로 상위 요소로 진행되는 것을 의미합니다.
