JQuery_jquery의 DOM 이벤트 버블링 예제 분석

이 기사에서는 예제를 통해 JQuery의 DOM 이벤트 버블링을 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

버블링이란 무엇인가

페이지에 여러 이벤트가 있을 수 있으며 여러 요소가 동일한 이벤트에 응답할 수 있습니다. 웹 페이지에 두 개의 요소가 있고 한 요소가 다른 요소에 중첩되어 있으며 둘 다 클릭 이벤트에 바인딩되어 있다고 가정합니다. 동시에 클릭 이벤트도 body 요소에 바인딩됩니다.

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

내부 스팬 요소를 클릭하면, 즉 스팬 요소의 클릭 이벤트가 발생하면 3개의 레코드가 출력됩니다. 내부 범위 요소를 클릭하기만 하면 외부 div 요소 및 본문 요소에 바인딩된 클릭 이벤트가 트리거됩니다. 이는 이벤트 버블링으로 인해 발생합니다. 범위 요소를 클릭하는 동안 범위 요소가 포함된 div 요소와 div 요소가 포함된 요소 본문도 클릭하면 각 요소는 특정 순서로 클릭 이벤트에 응답합니다.

요소의 클릭 이벤트는 다음 순서로 "버블링"됩니다.

1.
2. dc6dce4a544fdca2df29d5ac0ea9906b
3.

버블링이라고 부르는 이유는 DOM 계층구조에 따라 이벤트가 버블처럼 계속해서 상위로 올라가기 때문입니다.

이벤트 버블링으로 인한 문제

이벤트 버블링으로 인해 예상치 못한 결과가 발생할 수 있습니다. 위의 예에서는 원래 45a2772a6b6107b401db3c9b82c049c2 요소의 클릭 이벤트만 실행하려고 했으나, dc6dce4a544fdca2df29d5ac0ea9906b 요소와 6c04bd5ca3fcae76e30b72ad730ca86d 요소의 클릭 이벤트도 동시에 실행되었습니다. 그러므로 사건의 범위를 제한할 필요가 있다. 45a2772a6b6107b401db3c9b82c049c2 요소를 클릭하면 45a2772a6b6107b401db3c9b82c049c2 요소의 클릭 이벤트가 발생하지만 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 클릭하면 dc6dce4a544fdca2df29d5ac0ea9906b 요소의 클릭 이벤트만 트리거되고 6c04bd5ca3fcae76e30b72ad730ca86d 요소는 트리거되지 않습니다.

이벤트 객체

IE-DOM과 표준 DOM은 이벤트 객체를 다른 방식으로 구현하기 때문에 다른 브라우저에서 이벤트 객체를 얻는 것이 더 어려워집니다. 이 문제를 해결하기 위해 JQuery는 필요한 확장과 캡슐화를 만들어 모든 브라우저에서 이벤트 객체와 이벤트 객체의 일부 속성을 쉽게 얻을 수 있도록 했습니다.

프로그램에서 이벤트 객체를 사용하는 것은 매우 간단합니다. 함수에 매개변수만 추가하면 됩니다.

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

이렇게 '요소' 요소를 클릭하면 이벤트 객체가 생성됩니다. 이 이벤트 객체는 이벤트 처리 함수를 통해서만 액세스할 수 있습니다. 이벤트 처리 함수가 실행된 후 이벤트 객체는 소멸됩니다.

이벤트 버블링 중지

이벤트 버블링 중지는 이벤트에 있는 다른 객체의 이벤트 핸들러가 실행되는 것을 방지할 수 있습니다. 이벤트 버블링을 중지하기 위해 JQuery에 stopPropagation() 메서드가 제공됩니다.

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

45a2772a6b6107b401db3c9b82c049c2 요소를 클릭하면 45a2772a6b6107b401db3c9b82c049c2 요소의 클릭 이벤트가 발생하고 dc6dce4a544fdca2df29d5ac0ea9906b 요소의 클릭 이벤트는 발생하지 않습니다. 동일한 방법을 사용하여 dc6dce4a544fdca2df29d5ac0ea9906b 요소의 버블링 문제를 해결할 수 있습니다.

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

이렇게 하면 45a2772a6b6107b401db3c9b82c049c2 요소나 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 클릭하면 해당 내용만 출력되고 다른 내용은 출력되지 않습니다.

차단 기본 동작

웹 페이지의 요소에는 고유한 기본 동작이 있습니다. 예를 들어 하이퍼링크를 클릭하면 이동하고 '제출' 버튼을 클릭하면 양식이 제출되는 경우가 있습니다.

JQuery에서는 요소의 기본 동작을 방지하기 위해 PreventDefault() 메서드가 제공됩니다.

예를 들어 프로젝트에서는 '제출' 버튼을 클릭하면 해당 요소가 필수 필드인지, 요소 길이가 6자인지 등 양식 내용을 확인해야 하는 경우가 많습니다. 등. 제출 조건이 충족되면 양식이 양식 제출을 방지하지 않는 경우(기본 동작)

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

사용자 이름이 비어 있는 경우 "제출" 버튼을 클릭하면 메시지가 나타나고 양식을 제출할 수 없습니다. 양식은 사용자 이름을 입력한 후에만 제출할 수 있습니다. PreventDefault() 메소드가 양식 제출을 방지할 수 있음을 알 수 있습니다.

이벤트 객체의 버블링과 기본 동작을 동시에 중지하려면 이벤트 처리 함수에서 false를 반환하면 됩니다. 이는 이벤트 객체에서 stopPapagation() 메서드와 PreventDefault() 메서드를 모두 호출하는 간단한 방법입니다.

양식 예에서 event.preventDefault()는 다음과 같이 다시 작성할 수 있습니다. return false;

이벤트 버블링 예제에서 event.stopPropaqation()을 다음과 같이 다시 작성할 수도 있습니다. return false;

이벤트 캡쳐

이벤트 캡처와 이벤트 버블링은 서로 반대되는 프로세스입니다. 이벤트 캡처는 위에서 아래로 트리거됩니다. 여전히 버블링 이벤트의 예로 요소의 클릭 이벤트는 다음 순서로 캡처됩니다.

1.
2. dc6dce4a544fdca2df29d5ac0ea9906b
3.

분명히 이벤트 캡처는 가장 바깥쪽 요소부터 시작하여 가장 안쪽 요소까지 진행됩니다. 따라서 바인딩된 클릭 이벤트는 먼저 6c04bd5ca3fcae76e30b72ad730ca86d 요소에 전달된 다음 dc6dce4a544fdca2df29d5ac0ea9906b 요소에 전달되고 마지막으로 45a2772a6b6107b401db3c9b82c049c2 요소에 전달됩니다.

안타깝게도 모든 주요 브라우저가 이벤트 캡처를 지원하는 것은 아니며 이 결함은 JavaScript로 해결할 수 없습니다. JQuery는 이벤트 캡처를 지원하지 않습니다. 독자가 이벤트 캡처를 사용해야 하는 경우 기본 JavaScript를 직접 사용하십시오.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.