javascript - Event 버블링 및 캡쳐링 해결방법

■ 이벤트 전파 : 여러 요소가 한번의 클릭에 모두 반응하도록 하는 전략

   ▶ 이벤트 캡처링 :  모든 것을 감싸고 있는 최상위의 요소에게 이벤트가 처음으로 주어지고, 그 후에 연속해서 하위 요소로 전달된다.

   ▶ 이벤트 버블링 :  이벤트가 가장 낮은 자식 요소에 처음으로 전달되고, 해당 요소가 반응한 후에, 그 이벤트는 그 부모 요소로 전파

 

■ 이벤트 버블리의 부작용

   이벤트 버블링은 기대하지 않은 결과를 낳을 수 있는데, 특히 mouseover나 mouseout에 대해 엉뚱한 요소가 응답을 하는 경우 더욱 그렇다.

   mouseout 이벤트 핸들러가 <div> 태그에 연결되었다고 가정한다면, 사용자의 마우스 커서가 <div>위에 존재한다면 mouseout핸들러가 예상한 대로

   잘 실행될 것이다. 왜냐하면 <div>는 계층 구조상 가장 높은 위치에 있기 때문이며 다른요소들에게 이 이벤트가 전달되지 않을 것이기 때문.

   이와 반대로 커서가 <a> 요소에 존재하게 된다면 mouseout 이벤트는 <a>태그로 보내진다. 이 이벤트는 버블업 되어 상위에 있는 <span> 태그로도

   전달될 것이고, 그 후에 <div> 태그로도 전달되어 <div>가 가지고 있는 핸들러가 실행된다.  

   <div >

     <span>

       <a>

       </a>

     </span>

   </div>        

   - 해결책 : 일반적인 경우는 hover() 함수를 사용하여 이벤트 전파 범위를 제한할 수 있다.

                  하지만 이벤트를 공간적으로 제한(다른 요소로 전달되는 것을 막는것) 하거나 시간적으로 제한(특정 시점에서 이벤트를 막는것)해야 할

                  특수한 경우 이벤트 객체를 추가하여 문제를 해결할 수 있다.

ex)

  $(document).ready(function(){

$('# switcher')click(function(event){

$('#switcher button').toggleClass('hidden');

});

  });

 

 

■ 이벤트 대상 (event capturing 해결 방법?)

   event 변수 하나를 추가함에 따라 핸들러에서 이벤트 객체를 사용할 수 있게 되었으며 이벤트 객체의 event.target 프로퍼티를 사용하여 이벤트의

   영향을 제어하는데 도움을 받을 수 있다. 이 프로퍼티는 DOM API의 한 부분이지만, 모든 브라우저에서 구현하고 있지는 않다. jQuery는 모든

   브라우저에서 이 프로퍼티를 사용할 수 있도록 이벤트 객체를 확장하고 있다. .target을 사용함으로써 DOM에서는 어느 요소가 이벤트를 처음으로

   받는 요소인지를 (click이벤트 경우 이벤트 실제 아이템)을 알수 있다.

 

ex)

   $(document).ready(function(){

$('#switcher').click(function(event){

    if(event.target == this){

$('#switcher .button').toggleClass('hidden');

    }

});

   });

 

■ 이벤트 전파 멈추게 하기

   이벤트 객체는 버블링 과정을 중단할 수 있도록 하는 .stopPropagation()메서드를 제공한다.

   이 메소드는 순수 자바스크립트의 기능이긴 하지만 모든 브라우저가 지원하는건 아니다. 하지만 JQuery를 사용해서 이벤트 핸들러들을 등록하여

   사용하기만 하면 모든 브라우저에서 완전한 호환성을 갖도록 할 수 있다.

 

ex)

   $(document).ready(function(){

$('#switcher .button').click(function(event){

$('body').removeClass();

if(this.id == 'switcher-narrow'){

$('body').addClass('narrow');

}else if(this.id == 'switcher-large'){

$('body').addClass('large');

}

$('#switcher .button').removeClass('selected');

$(this).addClass('selected');

event.stopPropagation();

});

   });

[출처] Event 전파에 따른 문제점과 해결방법 |작성자 cowhdgk555

[출처] Event 전파에 따른 문제점과 해결방법 |작성자 cowhdgk555

출처 - http://blog.naver.com/PostView.nhn?blogId=cowhdgk555&logNo=130109534847