자바스크립트 이벤트 버블링은 나·그림 및 텍스트 예시

1. 이벤트

브라우저 클라이언트 응용 플랫폼에서는 기본 생활이 이벤트 중심, 즉 이벤트가 발생하고 그에 따른 조치가 취해집니다.

브라우저 이벤트는 어떤 일이 발생했다는 신호를 나타냅니다. 이벤트를 자세히 설명하는 것은 이 기사의 초점이 아닙니다. 아직 이해하지 못한 친구들은 W3school 튜토리얼을 방문하여 다음 내용을 더 잘 이해하는 데 도움이 될 것입니다.

2. 버블 메커니즘

버블링이란?

아래 그림을 이해하셔야 합니다. 거품은 물 밑바닥에서 시작하여 깊은 곳에서 얕은 곳으로, 위로 올라갑니다. 올라가는 동안 거품은 다양한 깊이의 물을 통과합니다. 이에 따라 이 거품은 여기의 이벤트와 동일하며 물은 전체 돔 트리와 동일합니다. 이벤트는 돔의 루트 노드로 전달될 때까지 돔 트리의 맨 아래 레이어에서 전달됩니다.

간단한 사례 분석

다음은 버블링 원리를 설명하는 간단한 예입니다. 3개의 간단한 dom 요소로 html을 정의합니다: div1, div2,span, div2 포함 범위, div1 포함 div2; 본문 아래 모두:

"body" >

"box1" class= "box1" &gt ; "box2" class= "box2" > "span" >이것은 범위입니다. 인터페이스의 프로토타입은 다음과 같습니다. 이벤트의 시간 및 트리거 이벤트 노드 정보:

?

1 2 3 4 5 6 7 8 "text/javascript" > window.onload = 함수 () { document. getElementById( "body " ).addEventListener( "클릭 " ,eventHandler) ; } 함수 eventHandler(event) { "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } console.log( "시간:" + new 날짜(event.timeStamp)+ " 이벤트를 생성하는 노드: " + event.target.id + " 현재 노드: " +event.currentTarget.id); } 🎜🎜🎜🎜 "This isspan", div2, div1, body를 차례로 클릭하면 다음 정보가 출력됩니다. ‐ out out off div 's ‐ ‐ ‐ ‐‐ ‐ ‐를 만들려면,

하위 요소인 div2 및span에서 이러한 요소를 클릭하면 클릭 이벤트가 발생하고 본문에서는 이를 캡처한 후 해당 이벤트 처리 함수를 호출합니다. 물 속의 거품이 아래에서 위로 올라가는 것처럼 이벤트도 마찬가지입니다.示 사건 전송의 개략도는 다음과 같습니다:

, 사건이 진행되는 동안 몇 가지 정보가 있을 것입니다. 이는 사건의 일부입니다: 사건 시간 + 사건 장소 사건+사건 유형+사건+사건 현재 처리자 + 기타 정보, 전체 HTML 코드는 다음과 같습니다.

? 4

5

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 "UTF-8" > "text/javascript" src= "js /jquery-1.11. 0.js?1.1.11" > 여기에 제목 삽입&lt ;/제목> "text/css" > .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. b. 이벤트 버블링 종료

이제 이러한 기능을 구현하려고 합니다. div1을 클릭하면 "안녕하세요, 저는 가장 바깥쪽 div입니다."라는 메시지가 나타납니다. 저는 가장 바깥쪽 div입니다."라는 메시지가 뜹니다. 안녕하세요, 저는 두 번째 레이어 div입니다."; 스팬을 클릭하면 "안녕하세요, 저는 스팬입니다"라는 팝업이 뜹니다.

여기에서 다음과 같은 자바스크립트 조각이 생성됩니다.

? 1 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); }); } window.onload = 함수 () { document.getElementById( "box1" ).addEventListener( "클릭" , 함수 (이벤트) { alert( "안녕하세요, 저는 가장 바깥쪽 div. " ); 🎜 } ); 🎜🎜 document.getElementById( "box2" code> ).addEventListener( "클릭" , 함수 (이벤트){ 🎜🎜 alert( "안녕하세요. div의 두 번째 레이어입니다. " ); 🎜🎜 }); 🎜🎜 document.getElementById( "span" ).addEventListener( "클릭" , 함수 (이벤트){ 🎜🎜 alert( "안녕하세요, 저는 스팬입니다." ); 🎜🎜 }); 🎜🎜 } 🎜🎜 🎜🎜🎜🎜🎜🎜 위 코드에서 스팬을 클릭하면 "안녕하세요, 저는 스팬입니다."라는 팝업 상자가 나타날 것으로 예상됩니다. 예, 다음과 같은 대화 상자가 나타납니다.

이 대화 상자에서 확인을 클릭하면, 다음 대화 상자가 순서대로 나타납니다.

> . 우리가 원하는 것은 클릭하는 사람이 누구의 정보를 표시하는지입니다. 위와 같은 상황은 왜 발생하는 걸까요? 그 이유는 이벤트 버블링에 있습니다. 범위를 클릭하면 생성된 이벤트가 상위 노드인 div2와 상위 노드인 div1도 이 이벤트를 수신하므로 이벤트에 응답하고 실행됩니다. . 기능. 이제 문제가 발견되었습니다. 해결 방법은 무엇입니까?

방법 1: 좀 더 생생한 상황을 생각해 보겠습니다. 물 속의 거품이 바닥에서 솟아오르고 있는데, 지금 물 속에 있는데 거품이 위로 올라가는 것을 원하지 않으면 어떻게 해야 할까요? --찔러라! 거품이 없으면 자연스럽게 거품이 나지 않습니다. 마찬가지로 특정 노드의 경우 지금 처리된 이벤트를 원하지 않으면 버블링을 종료할 수 있습니다. 해당 처리 함수에 event.stopPropagation()을 추가하고 방송을 방송하는 사건의 방송을 종료합니다. 이벤트가 이 노드에 머물면서 퍼지지 않도록 배포합니다. 위의 스크립트 조각을 수정합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 "text/javascript " > window.onload = code> code> 함수 () { document.getElementById( "box1" ).addEventListener( "클릭" , 함수 (이벤트){ alert( " 안녕하세요, 저는 가장 바깥쪽 div " ); event.stopPropagation(); "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); event.stopPropagation(); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); event.stopPropagation(); }); 🎜🎜 document.getElementById( "box2" ).addEventListener( "클릭" , 함수 code> code> (이벤트){ 🎜🎜 alert( "안녕하세요. div의 두 번째 레이어입니다. " ); 🎜🎜 event.stopPropagation(); 🎜 }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); event.stopPropagation(); }); } 이러한 코드를 작성한 후 다른 요소를 클릭하면 다른 프롬프트가 표시되며 여러 상자가 팝업되지 않습니다.

방법 2: 이벤트에는 원래 이벤트를 트리거한 노드에 대한 참조와 현재 이벤트를 처리 중인 노드에 대한 참조가 포함되어 있습니다. 노드가 자체적으로 트리거된 이벤트만 처리하는 경우 자체적으로 생성되지 않은 이벤트는 처리되지 않습니다. . event.target은 이 이벤트 객체를 생성한 DOM 노드를 참조하고, event.currrentTarget은 현재 처리 노드를 참조하여 두 대상이 동일한지 확인할 수 있습니다.击 예를 들어 SPAN은 이벤트 이벤트 객체를 생성합니다. Event.target은 이 사건을 처리할 때, event.currenttarget은 이 때 두 요소가 동일하며 해당합니다. 처리 기능이 수행됩니다. div2에 이벤트가 전달되면 event.currentTarget은 div2가 됩니다. 이때 둘이 동일하지 않다고 판단됩니다. 즉, div2 자체에서는 이벤트가 생성되지 않으며 응답 처리 로직이 수행되지 않습니다.

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 "text/javascript" > window.onload = 함수 () { "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是最外层div。" ); } }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是第二层div。" ); document.getElementById( "box1" ).addEventListener( "클릭" , 함수 (이벤트){ 🎜🎜 if code> code> (event.target == event.currentTarget) 🎜🎜 { 🎜🎜 alert( "안녕하세요, 저는 외부 사업부. " ); 🎜🎜 } 🎜 🎜 }); 🎜🎜 document.getElementById( "box2" ).addEventListener( "클릭" , 함수 (이벤트 ){ 🎜🎜 if (event.target == event.currentTarget) 🎜🎜 { 🎜🎜 code> code> alert( "안녕하세요. 저는 두 번째 레이어 div입니다." ); 🎜 } }); document.getElementById( "span" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是span。" ); } }); } ㅋㅋ 이벤트 전달 관점에서: 방법 1은 이벤트 버블링을 취소하는 것입니다. 즉, 일부 노드가 버블링을 취소하면 이벤트가 다시 전달되지 않습니다. 방법 2는 버블링을 방지하지 않고 필요한 이벤트를 필터링하는 것입니다. 처리됨 이벤트는 이벤트가 처리된 후에도 계속 전달됩니다. 장점과 단점: 방법 1 단점: 특정 요소를 클릭하여 해당 정보를 표시하려면 방법 1에서는 각 요소의 하위 요소가 필요합니다. 또한 이벤트의 버블링 전달을 종료해야 합니다. 즉, 다른 요소와 기능적으로 밀접하게 관련되어 있으므로 이 방법은 매우 취약합니다. 예를 들어, 스팬 요소의 처리 기능이 버블링 종료를 수행하지 않으면 이벤트가 div2로 전송되어 div2에 대한 프롬프트 메시지가 표시됩니다.

방법 2의 단점: 방법 2는 이벤트 수신 처리 기능을 추가합니다. 각 요소의 이벤트 처리 논리는 매우 유사합니다. 즉, 코드 중복이 많이 발생하는 경우(event.target == event.currentTarget)가 있다는 판단이 있습니다. 이제 요소가 세 개 있어도 괜찮습니다. 10개 이상이면 수백 개가 있는데 어떻게 해야 하나요?

또한 각 요소마다 처리 기능이 있어 로직과 코드의 복잡성이 어느 정도 증가합니다. 방법 2번 방법을 다시 분석해 보겠습니다. 방법 2번의 원리는 요소가 인시던트를 수신한 후 이벤트가 요구 사항을 충족하는지 확인하고 해당 처리를 수행한 다음 이벤트가 계속 버블링되어 통과되는 것입니다. ; 상위 노드가 이벤트를 균일하게 처리하고, 이벤트가 발생한 위치(즉, 이벤트가 발생한 노드)를 확인한 다음 그에 따라 처리할 수 있습니까? 대답은 '예'입니다. 이벤트 리스너를 body 요소에 추가한 다음 event.target을 판단하여 다양한 대상에 대해 다양한 동작을 생성합니다.

방법 2의 코드를 리팩터링합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 &lt ;스크립트 유형= "text/javascript" > window.onload = 함수 () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } 함수 code> eventPerformed(event) { "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } function eventPerformed(event) { var target = event.target; switch (target.id) { case "span" : alert( "您好，我是span。" ); break ; var target = event.target; 🎜 스위치 (target.id) { 🎜🎜 case "span" : 🎜🎜 경고( "안녕하세요. 저는 스팬입니다. " ); 🎜🎜 중단 ; 🎜 case "div1" : alert( "您好，我是第二层div。" ); break ; case "div2" : alert( "您好，我是最外层div。" ); break ; } } 결과적으로 다른 요소를 클릭하면 일치하는 프롬프트만 팝업되고 중복 프롬프트는 나타나지 않습니다.把 위의 방법을 통해 할아버지 노드의 Body 요소를 완성하기 위해 각 요소가 가져야 하는 처리 기능을 전달했으며 해당 논리를 직접 구현하지 않았습니다. -이벤트 위임이라고 합니다. + 다음은 다이어그램입니다.

자바스크립트 이벤트 버블링은 나·그림 및 텍스트 예시

관련 기사