jquery event 중복 발생 방지/ event 해제

Event Bubbling

• jQuery 이벤트가 여러 번 실행되는 경우.
• target 요소의 부모 태그들도 이벤트에 반응함.

1.stopPropagation() / preventDefault()

가장 일반적인 이벤트 버블링을 방지하기 위한 방법!!

• e.stopPropagation()

현재 이벤트가 부모에게 전파되는 것을 방지

• e.preventDefault()

현재 이벤트 기본 동작 중지

*기본 동작: a태그의 페이지 이동, submit 태그 form 안에 있는 input 등을 전송

 

 

$("#elementId").on('click', function(e) {
	e.stopPropagation();
    e.preventDefault();
});

2. stopImmediatepropagation()

1번의 두가지를 합친 것으로 볼 수 있다.

• 부모와 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중지
• 한 요소에 여러 이벤트가바인딩 돼있을 때, 해당 함수를 쓴 이벤트만 발생하고 나머지 이벤트는 발생하지 않음.

$("#elementId").on('click', function(e) {
	e.stopImmediatepropagation();
});

3. off 함수

이벤트를 해제했다가 다시 바인딩

ex) 모든 이벤트 제거 후 click 이벤트 바인딩

$("#elementId").off().on('click', function(e) {

});

ex) click 이벤트 제거 후 다시 바인딩

$("#elementId").off("click").on('click', function() {

});

4. bind, unbind

bind는 on함수와 동일하게 사용하는데 옛날코드라 on, off 함수 사용을 권장한다!

$("#elementId").unbind("click").bind("click",function(){

});