jQuery 이벤트 전파, 이벤트 객체 명확화

버블링같은 문제점을 해결하기위해 필요한것은 이벤트가일어나는 엘리먼트 그리고 이벤트 핸들러를 명확히 할 필요가 있다. 어디서 이벤트가 시작하고 끝나는지는 정해주는것이다.먼저 폰트가 커지는 클릭이벤트예시를보자


하나
둘
셋

하나
둘
셋

li엘리먼트를 클릭시 이벤트를 일어나게할것이다.생성되는 클래스의 스타일은 폰트가 크게되도록해줬다.

.boxing{font-size:24px;}

클릭시 클래스를 생성해주는 이벤트는 다음과 같다.

$(document).ready(function(){
	$('ul li').click.function() {
    /* li엘리먼트에접근 
     click메소드 즉 마우스를 클릭했을떄
     아래 함수실행*/					   
     $('ul li').addClass('boxing');
	});	});

위에서 변수접근을 보면 'ul li'로 상위엘리먼트에도 영향을 미칠수 있음을보여준다 이는 앞서설명한 버블링같은 문제를 야기할 수 있다. 정확히이벤트가 일어나는 li엘리먼트를 위해서는 다음과 같이 변수 event를 추가하면된다

$('ul li').click.function(event) {
//내용
});

하지만 여기서 끝이아니다 이벤트를 정확히멈추게하려면 다음과같이 뒤에서 종결지어야한다.

$('ul li').click.function(event) {
//내용
event.stopPropagation();//종결
});

stopPropagation()이것은 자바스크립트의 메소드로 종결할 수 있도록한다.이로서 이벤트는 상위엘리먼트에 영향을 주지않고 li엘리먼트에서 일어난다.

이벤트 위임

이벤트 버블링이 항상문제만 있는것은 아니다 버블링이 여러이벤트가 일으킨다는점을 이용하여 하나의엘리먼트에가 여러 이벤트를 수행하도록할수 있다.이것이바로 이벤트 위임(event delagation)이다.

$(document).ready(function(){
 $('ul').bind('click',function(event) {
	if ($(event.target).is('li')) {					   
      $('ul li').removeClass('boxing');
      $(event.target).addClass('boxing');
	}
 });  
});

위 스크립트에서는 조건문이 추가된것을 볼 수 있다.

if ($(event.target).is('li')) {
//내용
}

event.target은 실제로 이벤트가 일어나곳을 지명한다.
.is('li') 는 li엘리먼트가 할당되어있는지를 검사한다.
this 역시 명확성을 위해 event.target로 바꿔져있다.
조건문을 바꾸어 다른 이벤트에 적용하여 한엘리먼트에 여러이벤트가 일어날 수 있게 한다.

이벤드 핸들러 제거하기

마지막으로 남은것이 이벤트 핸들러를 제거하는것이다.이벤트 발생후 더이상 동작이필요하지않은 겨우 환전히 제거하는 것이 좋다.이떄 사용하는 것이unbind()메소드이다.

bind('click' ,function()){}과 click.function(){}: 위의 기능은 똑같다. click이벤트가 훨씬 간단하다 굳이 bind를쓰는 이유는 꼭필요할떄 unbind와 같이 이벤트핸들러제거를 위함이다.

제거방법은 간단하다

$('ul').unbind('click');

괄호안에 사용한 이벤트를 쓰면된다.

예제는 여기서보자http://sianasiatiger.cafe24.com/study/J_enentProcedure.html

저작자표시