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
댓글