이벤트 캡처링 / 버블링 / event.stopPropagation();

 

html 코드

 

a 를 클릭하면 background blue로 변한다
 a 만 클릭했는데 h2 도 이벤트 전달을 받아서 background 색이 변하는것을 볼수 있다. 

 

 

$(document).ready(function(){
    $('a').click(function(event) {
        $(this).css('background-color', 'Blue');
        event.preventDefault();
    });
    $('h2').click(function() {
        $(this).css('background-color','Red');
    });
});

 

 

 

h2 에 이벤트전달이 되지 않도록

 

stopPropagation() 메서드를 이용

 

 

$(document).ready(function(){
    $('a').click(function(event) {
        $(this).css('background-color', 'Blue');
        event.stopPropagation();
        event.preventDefault();
    });
    $('h2').click(function() {
        $(this).css('background-color','Red');
    });
});
 

이벤트좀더 간단하게

 

return false; 를 사용하면 자동으로 prevetnDefault()stopPropagtion()

동시에 사용하는것으로 인식함

 

$(document).ready(function(){
    $('a').click(function(event) {
        $(this).css('background-color', 'Blue');
        return false;
    });
    $('h2').click(function() {
        $(this).css('background-color','Red');
    });
});
 
 

 

댓글을 달아 주세요

Posted by 발 빠른 너구리 Fast-Racoon

▲ TOP ▲