[JS] jQuery - 이벤트

 자바스크립트에서 브라우저의 이벤트를 연결 시키는 이벤트 모델에 대해 공부하였다. DOM 레벨에 따른 이벤트 연결 방식이 몇가지 있었다. 그러나 주의해야할 점은 항상 브라우저간 차이점을 고려하여 코딩을 해야했었다.(표준 브라우저, IE브라우저)

그러나 jQuery에서는 크로스 브라우징이 가능하다. 이는 표준 브라우저와 IE브라우저에 관계없이 스크립트 제작이 가능하다. 이것이 jQuery의 장점이다.

 jQuery의 이벤트는 기존 자바스크립트의 이벤트가 모두 존재한다. 그러나 자바스크립트의 이벤트 연결보다 훨씬 간편하다.


$(selector).bind(eventName, data, handler)
$(selector).bind(object)
이벤트 할당 함수
eventName : 이벤트 이름(예 : click)
data : 핸들러에 사용할 데이터(생략가능)
handler : 이벤트 핸들러

이벤트종류

$(selector).unbind(event)
$(selector).unbind(eventName)
$(selector).unbind(eventName, handler)
이벤트 핸들러 제거
event : 이벤트를 발생시킨 객체의 정보

$(selector).toggle(handler, ...,handler)
click이벤트를 여러 핸들러로  번갈아가며 실행

$(selector).hover(handler, handler)
mouseenter이벤트와 mouseleave이벤트를 동시에 연결

$(selector).delegate()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).live()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).one(eventName, handler)
이벤트를 한 번만 연결

$(selector).trigger(eventName)
$(selector).trigger(eventName, data)
인벤트를 강제로 발생(사용자의 입력이 따로 필요없이 이벤트를 실행시킴)

이벤트 객체
이벤트를 연결할때 핸들러에는 event객체가 자동으로 인자로 넘어간다.

속성
event.pageX : 브라우저의 화면을 기준으로 한 마우스의 X 좌표
event.pageY : 브라우저의 화면을 기준으로 한 마우스의 Y 좌표
event.preventDefault() : 기본 이벤트 제거
event.stopPropagation() : 이벤트 버블링 제거

이벤트 통합 메서드
jQuery에서는 이벤트를 통합하여 연결시키는 on()과 off()를 권장하고 있다.

on() : 이벤트를 연결
off() : 이벤트를 제거
$(selector).on(eventName, handler) - bind()와 같은 역할
$(selector).off(eventname[handler,,,]) - nubind()와 같다