[jQuery]이벤트 , on , off

제이쿼리와 바닐라자바스크립트의 addEventListener의 차이는 위와 같다.

제이쿼리의 이벤트 메소드인

.on()에 대해 알아보자.

W3C의 설명은 다음과 같다.

.on(events[selector1,selector2][data], handler(eventObject))

우리가 아는 것은 events와 hander(eventObject))이다.

그렇다면

[selector][data]는 무엇을 의미할까?

[selector]는 일종의 필터링 기능을 한다.

위 코드가 selector를 추가한 코드이다.

ul태그의 a와 li에 이벤트를 발생시킨다.

그 예로

콘솔 값의 this는 ul태그가 아닌

이벤트가 발생하는 a와 li이다.

 

위 코드는

만약 $('body')부분이 ul태그였다면 실행되지 않았을 것이다.

하지만 body태그를 주고 필터링을 함으로써 순서를 맞추었다.

그렇다면  이벤트 제거는 어떻게 할까?

on대신 off를 사용하면 된다.

첫번째 인자에는 이벤트를 두번째는 핸들러를 입력한다.

위의 코드에서는

focus blur 시에 handler가 발생하고

focus 시에 alert를 호출하는 function이 실행되고

click시에 focus의 handler는 off된다.

결국에는 버튼 클릭 전에는

포커스 시에  - text를 리턴하고, 경고창을 내지만

클릭 버튼 후에는

경고창 만을 출력한다.

※추가적으로 off('focus', handler) 대신 off('focus)만 입력한다면

모든 focus의 이벤트가 사라진다.