JQuery 이벤트

JQuery 를 이용해서 이벤트 추가 및 제거, 전파 방지, 커스텀 이벤트 등록 등의 작업을 할 수 있다. 이벤트 처리 시에 cross browsing 문제를 처리해주기 때문에 역시나 MS IE 나 chrome 에서도 잘 동작하도록 구현할 수 있다.

JQuery 이벤트는 문서로딩, 마우스, 키보드, 폼, 웹브라우저 등에서 발생하는 것으로 구분할 수 있다. 각 이벤트에 대한 정보는 다음 사이트를 참고 하면 될 것 같다.

https://api.jquery.com/category/events/

이벤트 관련 처리하는 과정은 다음과 같이 정리할 수 있겠다.

셀렉터를 이용해 이벤트 처리 요소를 찾는다. 그런 후, 특정 이벤트에 대한 이벤트 핸들러를 등록한다.

이벤트 등록 및 제거 함수는 다음과 같다.

on() : 이벤트와 이벤트 핸들러 함수의 연결

one() : 이벤트와 이벤트 핸들러 함수의 연결, 한번만 실행됨.

off() : 이벤트와 이벤트 핸들러 함수의 연결을 제거.

on() 과 off() 함수는 직관적으로 어떤 동작을 하는지 와닿는데, one() 은 그렇지 않다. 한번만이 무슨 말일까? 그래서 좀더 찾아보니, one() 은 한번 이벤트 처리를 하고 난 뒤에는 자동으로 이벤트 핸들러와의 연결을 끊어진다. 즉, 최초의 이벤트에만 반응하게 되는 것이다. 분명히 자주 그러한 처리가 필요해서 만들어 뒀을텐데, 어떤 경우인지는 잘 모르겠다. 웹프로그래밍 경험을 많이 해봐야 알 수 있을 듯 하다.

요소의 기본 액션을 취소하기 위해서는 preventDefault() 를 이용하면 된다. 기본 액션을 취소한다는 의미는 만약에 <a> 를 예로 든다면, 링크에 대해 연결하는 작업을 하지 않도록 만든다는 의미이다. 구현하기에 따라 <a> 를 전혀 다른 동작을 하는 요소로 만들어 버릴 수도 있다.

이벤트의 버블링을 차단하기 위해서는 stopPropagation() 을 사용하면 된다. 버블링은 자식 요소에서 이벤트가 발생했다면, 부모에게도 전달되는 것을 얘기한다. 자식 요소에서 이벤트를 잡아서 처리를 하고 부모단에서 처리할 필요가 없다면 굳이 이벤트를 버블링할 필요가 없을 것이다. 이 때 stopPropagation() 을 호출해주면 된다. C/C++ GUI 프로그램을 할 때는 주로 리턴값을 boolean 값으로 넘겨줘서 이런 상황을 처리했었는데, JQuery 에서는 이러한 방식을 이용하는 것 같다.