버블링 이벤트는 하위 노드를 클릭하는 것으로 이벤트가 위쪽으로 전달되고 마지막으로 상위 노드와 조상 노드의 클릭 이벤트가 트리거됩니다. html 코드 부분: 코드 복사 코드는 다음과 같습니다. 외부 div 요소 > 외부 div 요소 jQuery 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br> $(함수(){<br> $('span').bind("클릭",function(){<br> var txt = $('#msg').html() "<p>내부 범위 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> });<br> $('#content').bind("클릭",function(){<br> var txt = $('#msg').html() "<p>외부 div 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> });<br> $("body").bind("클릭",function(){<br> var txt = $('#msg').html() "<p>본문 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> });<br> })<br> <br> <br> </div> 스팬을 클릭하면 div와 body의 클릭 이벤트가 발생합니다. div를 클릭하면 본문의 클릭 이벤트가 트리거됩니다. <p> </p>이런 버블링 이벤트를 방지하려면 어떻게 해야 할까요? 다음과 같이 수정하세요. <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="34183" class="copybut" id="copybut34183" onclick="doCopy('code34183')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code34183"> <script type="text/javascript"><br> $(함수(){<br> $('span').bind("클릭",function(event){<br> var txt = $('#msg').html() "<p>내부 범위 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> | 이벤트 버블링 중지 });<br> $('#content').bind("클릭",function(이벤트){<br> var txt = $('#msg').html() "<p>외부 div 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> | 이벤트 버블링 중지 });<br> $("body").bind("클릭",function(){<br> var txt = $('#msg').html() "<p>본문 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> });<br> })<br> <br> <br><br> <br> 제출 버튼을 클릭하면 기본 이벤트가 발생하는 경우가 있습니다. 예를 들어, 다른 인터페이스로 점프합니다. 하지만 검증을 통과하지 못한 경우 점프해서는 안 됩니다. 이때 event.preventDefault();를 설정하여 기본 동작을 방지할 수 있습니다. 다음과 같은 경우입니다. </div> <p></p> <p></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="73704" class="copybut" id="copybut73704" onclick="doCopy('code73704')"><u> 코드는 다음과 같습니다.</u><div class="codebody" id="code73704"> <br> <script type="text/javascript"><br> $(함수(){<br> $("#sub").bind("클릭",function(이벤트){<br> var username = $("#username").val(); //요소의 값을 가져옵니다. val() 메서드는 선택한 요소의 값을 반환하거나 설정합니다. <br> if(username==""){ ~ . $("#msg").html("<p>텍스트 상자의 값은 비워둘 수 없습니다.</p>") //프롬프트 메시지<br> event.preventDefault(); // 기본 동작 방지(양식 제출) <br> }<br> })<br> })<br> <br> <br> </div> html 부분: <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="25321" class="copybut" id="copybut25321" onclick="doCopy('code25321')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code25321"> <br> <form action="test.html"><br> 사용자 이름:<input type="text" id="username" /><br/><br> <input type="submit" value="submit" id="sub"/><br> </양식><br> <div id="msg"></div><br> </본문><br> <br> </div> 기본 동작을 방지하는 또 다른 방법은 false를 반환하는 것입니다. 효과는 동일합니다. 코드는 다음과 같습니다. <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="7567" class="copybut" id="copybut7567" onclick="doCopy('code7567')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code7567"> <script type="text/javascript"><br> $(함수(){<br> $("#sub").bind("클릭",function(이벤트){<br> var 사용자 이름 = $("#username").val() <br> if( 사용자 이름 == "" ){<br> $("#msg").html("<p>텍스트 상자의 값은 비워둘 수 없습니다.</p>");<br> false를 반환합니다.<br> }<br> })<br> })<br> <br> <br> </div> 마찬가지로 위의 버블링 이벤트도 false를 반환하여 처리할 수 있습니다. <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="34270" class="copybut" id="copybut34270" onclick="doCopy('code34270')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code34270"> <script type="text/javascript"><br> $(함수(){<br> $('span').bind("클릭",function(event){<br> var txt = $('#msg').html() "<p>내부 범위 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> false를 반환합니다.<br> });<br> $('#content').bind("클릭",function(이벤트){<br> var txt = $('#msg').html() "<p>외부 div 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> false를 반환합니다.<br> });<br> $("body").bind("클릭",function(){<br> var txt = $('#msg').html() "<p>본문 요소를 클릭했습니다<p/>";<br> $('#msg').html(txt);<br> });<br> })<br> <br> <br> </div> jQuery에는 DOM 이벤트 트리거를 위한 버블링 기능이 있습니다. 때때로 이 기능을 활용하면 코드 중복을 줄일 수 있지만 때로는 이벤트가 버블링되는 것을 원하지 않을 수도 있습니다. 이때 jQuery.Event가 버블링되는 것을 방지해야 합니다. <p></p></a></span> </div>
