<div class="codetitle"> <span><a style="CURSOR: pointer" data="49473" class="copybut" id="copybut49473" onclick="doCopy('code49473')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code49473"> <br><!DOCTYPE HTML> ; <br><head> <br><title>test</title><br><script src="http://code.jquery.com/jquery-1.9.1.min.js"> ;</script> <br><body> <br><div style="height:300px; background-color:red;" id="red"> >< div style="height:200px;ground-color:green;" id="green"> <br></div> <br></body> 🎜>< ;/html> <br><br> <br>위 HTML에서 빨간색 요소는 녹색 요소의 상위 요소입니다. <br><br><br> </div> <br>코드 복사<br><div class="codetitle"> <span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="41187" class="copybut" id="copybut41187" onclick="doCopy('code41187')"><u> </u>$(function(){ </a> $(" #green").click(function(event){ </span>alert("green click1"); </div>}) <div class="codebody" id="code41187">$("#green").click(function(event){ <br> Alert("녹색 클릭2"); <br>}); <br>$("#red").click(function(event){ <br>alert("빨간색 클릭"); <br>} ); <br>}); <br><br> <br>위의 js 코드는 빨간색 요소와 녹색 요소에 세 개의 클릭 이벤트를 추가합니다. <br>하위 요소인 green 요소를 클릭하면 green click1, green click2, red click 이벤트가 순차적으로 실행됩니다. <br>이벤트 추가: 녹색 요소를 클릭하면 녹색 click1과 녹색 click2(동일 요소에 대한 동일한 유형의 이벤트) 두 가지 이벤트가 순차적으로 실행됩니다. <br>이벤트 버블링: 녹색 요소를 클릭하면 상위 요소의 빨간색 클릭 이벤트가 트리거됩니다(상위 요소와 동일한 유형의 이벤트). </div>1. 하위 요소 이벤트 함수에서 이벤트 버블링 방지 <br>방법 1: event.stopPropagation() <br><br><br><br><br>코드 복사 <br><div class="codetitle"> <span> 코드는 다음과 같습니다. <a style="CURSOR: pointer" data="19160" class="copybut" id="copybut19160" onclick="doCopy('code19160')"><u> </u>$(function(){ </a>$("#green").click(function(event){ </span>event.stopPropagation(); </div> Alert("녹색 클릭"); <div class="codebody" id="code19160">}); <br>$("#red").click(function(event){ <br>alert("빨간색 클릭"); <br>}) ; <br>}); <br><br> <br>방법 2: false 반환 <br><br><br> </div> <br>코드 복사<br><div class="codetitle"> <span> 다음과 같습니다:<a style="CURSOR: pointer" data="58681" class="copybut" id="copybut58681" onclick="doCopy('code58681')"><u> </u>$(function(){ </a>$("#green").click(function(event){ </span>alert("green click"); </div> return false; <div class="codebody" id="code58681">}); <br>$("#red").click(function(event){ <br>alert("red click"); <br>}); <br><br> <br>위 두 가지 방법을 통해 하위 요소의 녹색 영역을 클릭한 후 빨간색 클릭 이벤트가 차단되어 더 이상 실행되지 않습니다. 그러나 빨간색 요소의 다른 영역을 클릭하는 데에는 영향을 미치지 않습니다. <br>둘 사이의 차이점: <br>false 반환은 event.preventDefault() event.stopPropagation()과 동일합니다. <br>2. 상위 요소 이벤트 함수에서 이벤트 버블링 방지<br> </div> <br><br><br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span> <a style="CURSOR: pointer" data="40119" class="copybut" id="copybut40119" onclick="doCopy('code40119')"> <u>$(function(){ </u>$("#green").click(function(event){ </a>alert("green click"); </span>}); </div> $(" #red").click(function(event){ <div class="codebody" id="code40119">if(event.target == this) <br>{ <br>alert("red click"); <br>} <br>} ); <br>}); <br><br> <br>클릭한 대상 요소가 빨간색 요소 자체가 아닌 하위 요소인지 확인하려면 if(event.target== this)를 사용하세요. element green 요소, then no if 내부의 코드가 실행됩니다. <br>3. 이벤트 추가 방지 <br>위 방법은 이벤트 버블링(즉, 상위 요소의 동일한 유형 이벤트)만 방지할 수 있지만 이벤트 추가(동일 요소의 동일한 유형 이벤트)는 방지할 수 없습니다. . <br><br> </div> <br><br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="22365" class="copybut" id="copybut22365" onclick="doCopy('code22365')"> <u>$(function(){ </u> $(" #green").click(function(event){ </a>event.stopImmediatePropagation(); </span>alert("green click"); </div>}) <div class="codebody" id="code22365">$("#green" ).click (function(){ <br>alert("green click2"); <br>}); <br>}) <br><br> <br>event.stopImmediatePropagation()은 녹색 click2 이벤트뿐만 아니라 이벤트가 버블링되는 것을 방지합니다.</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
