자바스크립트 이벤트 bubbling_javascript 스킬에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트 이벤트 bubbling_javascript 스킬에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

javascript 이벤트 버블링

이벤트는 JavaScript의 핵심 콘텐츠 중 하나입니다. 이벤트 적용에는 필연적으로 이벤트 버블링이라는 중요한 개념이 포함됩니다. 이벤트 버블링을 소개하기 전에 이벤트 흐름이라는 또 다른 중요한 개념을 소개하겠습니다.
1. 이벤트 흐름이란: DOM(Document Object Model)은 트리 구조로, 다음 그림과 같이 생생하게 표현됩니다.

html 요소가 이벤트를 트리거하면 해당 이벤트는 DOM 트리의 트리거 노드와 루트 노드 사이에 특정 순서로 전파됩니다. 이 전파 프로세스를 호출합니다. 이벤트의 흐름. 이벤트 전파 순서에 따라 두 가지 범주로 나눌 수 있는데, 하나는 이벤트 버블링이고 다른 하나는 이 장에서 소개할 주제와 관련된 이벤트 캡처입니다.

1. 이벤트 버블링: 소위 시간 버블링은 요소가 이벤트를 트리거할 때 이벤트가 버블처럼 트리거 요소에서 모든 상위 노드로 전파되는 것을 의미합니다. 해당 이벤트는 해당 루트 노드까지 수신됩니다. 이벤트가 상위 요소 핸들러 함수에 등록되면 하위 노드에서 이벤트가 트리거되더라도 상위 요소에 등록된 이벤트 핸들러 함수도 트리거됩니다. 예를 들어, 위 그림에서 a 요소의 onclick 이벤트가 발생하면 해당 상위 요소인 p, document, window가 모두 이 이벤트를 받게 되고, 해당 상위 요소에 시간 처리 기능이 등록되면 이 이벤트 처리 함수가 실행됩니다. 코드 예를 살펴보세요.

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

위 코드의 목적은 해당 셀을 클릭하면 해당 셀의 내용이 팝업되도록 하는 것입니다. 그러나 위 구현에서는 onclick 이벤트 핸들러가 각 셀에 등록되지 않고 대신 셀을 클릭하면 onclick 이벤트가 트리거되고 이벤트가 발생합니다. 또한 이벤트 개체에서 위쪽으로 전파되며 테이블 요소에 등록된 onclick 이벤트 핸들러가 이때 실행됩니다. 물론 이벤트 개체 매개변수 전달 문제가 설정됩니다. 모든 브라우저는 이벤트 버블링을 지원합니다. 2. 이벤트 캡처:

이벤트 캡처는 이벤트 버블링과 정반대입니다. 요소를 클릭하면 이벤트 전파 방향이 루트 요소에서 트리거 요소로 진행됩니다. IE는 브라우저 간 지원을 위해 일반적으로 기본적으로 버블링을 사용합니다. 버블 이벤트 처리 모델.

2.javascript 이벤트 버블링 코드 방지 이벤트 버블링은 특정 시나리오에서 매우 유용하지만 때로는 이를 방지해야 합니다. 다음은 이벤트 버블링을 방지하기 위해 모든 주요 브라우저와 호환되는 예제 코드입니다.
코드 예:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

로그인 후 복사

위의 코드는 이벤트가 버블링되는 것을 방지할 수 있습니다. 다음은 코드에 대한 간략한 설명입니다.

2. 코드 주석:

1. function stopBubble(e) {}, 이 함수는 이벤트 버블링을 방지하는 데 사용되며 매개변수는 이벤트 객체입니다.
2. if(e&&e.stopPropagation){e.stopPropagation();}, stopPropagation이 지원되는지 확인합니다. e.stopPropagation()을 사용합니다. stopPropagation() 함수는 IE10 및 IE10 이하 브라우저에서는 지원되지 않습니다.
3.window.event.cancelBubble=true, 현재 IE 브라우저는 이를 사용하여 이벤트 버블링을 방지합니다.

이상은 JavaScript 이벤트 버블링에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 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)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7403

자바 튜토리얼

1630

Cakephp 튜토리얼

1358

라라벨 튜토리얼

1268

PHP 튜토리얼

1218

Related knowledge

이벤트 버블링 메커니즘 이해: 하위 요소를 클릭하면 상위 요소의 이벤트에 영향을 미치는 이유는 무엇입니까? Jan 13, 2024 pm 02:55 PM

이벤트 버블링 이해: 하위 요소를 클릭하면 상위 요소에서 이벤트가 트리거되는 이유는 무엇입니까? 이벤트 버블링은 중첩된 요소 구조에서 하위 요소가 이벤트를 트리거할 때 이벤트가 가장 바깥쪽 상위 요소까지 버블링처럼 레이어별로 상위 요소에 전달된다는 것을 의미합니다. 이 메커니즘을 사용하면 하위 요소의 이벤트가 요소 트리 전체에 전파되고 모든 관련 요소가 차례로 트리거될 수 있습니다. 이벤트 버블링을 더 잘 이해하기 위해 구체적인 예제 코드를 살펴보겠습니다. HTML 코드: <divid="부모&q

js에서 클릭 이벤트를 반복적으로 실행할 수 없는 이유는 무엇입니까? May 07, 2024 pm 06:36 PM

JavaScript의 클릭 이벤트는 이벤트 버블링 메커니즘으로 인해 반복적으로 실행될 수 없습니다. 이 문제를 해결하려면 다음 조치를 취할 수 있습니다. 이벤트 캡처 사용: 이벤트가 발생하기 전에 실행할 이벤트 리스너를 지정합니다. 이벤트 전달: 이벤트 버블링을 중지하려면 event.stopPropagation()을 사용하세요. 타이머 사용: 일정 시간 후에 이벤트 리스너를 다시 트리거합니다.

jQuery .val() 실패의 이유와 해결 방법 Feb 20, 2024 am 09:06 AM

제목: jQuery.val() 실패 이유와 해결 방법 프론트 엔드 개발에서 jQuery는 DOM 요소를 조작하는 데 자주 사용됩니다. .val() 메소드는 양식 요소의 값을 얻고 설정하는 데 널리 사용됩니다. 그러나 때때로 .val() 메소드가 실패하여 양식 요소의 값을 올바르게 얻거나 설정할 수 없는 상황이 발생합니다. 이 기사에서는 .val() 실패의 원인을 살펴보고 해당 솔루션을 제공하며 특정 코드 예제를 첨부합니다. 1.원인분석.val() 메소드

이벤트 버블링이 두 번 트리거되는 이유는 무엇입니까? Feb 22, 2024 am 09:06 AM

이벤트 버블링이 두 번 트리거되는 이유는 무엇입니까? 이벤트 버블링(이벤트 버블링)은 DOM에서 요소가 이벤트(예: 클릭 이벤트)를 트리거할 때 이벤트가 최상위 문서 객체에 버블링될 때까지 요소에서 상위 요소로 버블링되는 것을 의미합니다. 이벤트 버블링은 DOM 이벤트 모델의 일부입니다. 이를 통해 개발자는 이벤트 리스너를 상위 요소에 바인딩할 수 있으므로 하위 요소가 이벤트를 트리거할 때 이벤트가 버블링 메커니즘을 통해 캡처되고 처리될 수 있습니다. 그러나 때때로 개발자는 버블링되어 두 번 트리거되는 이벤트를 접하게 됩니다.

vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? May 09, 2024 pm 02:33 PM

Vue.js 이벤트 수정자는 다음을 포함한 특정 동작을 추가하는 데 사용됩니다. 기본 동작 방지(.prevent) 이벤트 버블링 중지(.stop) 일회성 이벤트(.once) 이벤트 캡처(.capture) 수동 이벤트 수신(.passive) 적응형 수정자(.self)키 수정자(.key)

이벤트 버블링이란 무엇입니까? 이벤트 버블링 메커니즘에 대한 심층 분석 Feb 20, 2024 pm 05:27 PM

이벤트 버블링이란 무엇입니까? 이벤트 버블링 메커니즘에 대한 심층 분석 이벤트 버블링은 이벤트가 페이지에 전달되는 방식을 정의하는 웹 개발에서 중요한 개념입니다. 요소에 대한 이벤트가 트리거되면 이벤트는 가장 안쪽 요소부터 시작하여 가장 바깥쪽 요소로 전달될 때까지 바깥쪽으로 전달됩니다. 이러한 전달 방식은 물 속에서 버블이 발생하는 것과 같다고 하여 이벤트 버블링이라고 합니다. 이번 글에서는 이벤트 버블링 메커니즘을 심층적으로 분석해보겠습니다. 이벤트 버블링의 원리는 간단한 예를 통해 이해할 수 있습니다. H가 있다고 가정하자

어떤 JS 이벤트가 버블링되지 않습니까? Feb 19, 2024 pm 09:56 PM

JS 이벤트에서 버블링이 발생하지 않는 상황은 무엇입니까? 이벤트 버블링(Event Bubbling)은 요소의 이벤트가 발생한 후 가장 안쪽 요소부터 시작하여 가장 바깥쪽 요소까지 DOM 트리를 따라 위쪽으로 이벤트가 전송되는 것을 의미합니다. 그러나 모든 이벤트가 버블링될 수 있는 것은 아닙니다. 이벤트가 버블링되지 않는 몇 가지 특별한 경우가 있습니다. 이 기사에서는 이벤트가 버블링되지 않는 JavaScript의 상황을 소개합니다. 1. stopPropagati를 사용하세요

버블링되지 않는 JS 이벤트는 무엇입니까? Feb 18, 2024 pm 06:31 PM

버블링되지 않는 JS 이벤트는 무엇입니까? JavaScript는 웹 페이지에 상호작용성과 역동성을 추가하는 강력한 스크립트 언어입니다. JavaScript에서 이벤트 중심 프로그래밍은 매우 중요한 부분입니다. 이벤트란 버튼 클릭, 마우스 이동, 키보드 입력 등 사용자가 웹 페이지에서 수행하는 다양한 작업을 말합니다. JavaScript는 이벤트 처리 기능을 통해 이러한 이벤트에 응답하고 해당 작업을 수행합니다. 이벤트 버블링은 이벤트 처리 중 일반적인 메커니즘입니다. 이벤트 버블링은 다음을 의미합니다.

See all articles