이벤트

이벤트관련 메서드

이벤트 관련 method
예제 설명
bind() 이벤트를 연결합니다.
toggle() click 이벤트를 여러 이벤트를 번갈아가며 실행할 수 있게 연결합니다.
hover() mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결합니다.
unbind() 이벤트를 제거합니다.
one() 이벤트를 한 번만 연결합니다.
trigger() 이벤트를 강제로 발생시킵니다.
preventDefault() 기본 이벤트를 제거합니다.
stopPropagation() 이벤트 전달을 제거합니다.

이벤트 객체 속성

이벤트 객체 속성
이벤트 객체 속성 설명
event.pageX 브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치
event.pageY 브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치
event.preventDefault() 기본 이벤트를 제거합니다.
event.stopPropagation() 이벤트 전달을 제거합니다.

이벤트 연결 / 해제 메서드

이벤트 연결 / 해제 메서드
이벤트 객체 속성 설명
bind() 현재 존재하는 문서 객체에만 이벤트를 연결합니다.
delegate() 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결합니다.
live() 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결합니다.
one() 한번만 이벤트에 연결합니다.
unbind() bind() 메서드를 사용해 연결한 이벤트를 제거합니다.
die() live() 메서드를 사용해 연결한 이벤트를 제거합니다.
undelegate() delegate () 메서드를 사용해 연결한 이벤트를 제거합니다.

hover() / toggle()

HEADER5-0
HEADER5-1
HEADER5-2


이벤트 객체

							$(document).ready(function(){
								var canvas = document.getElementById("canvas");
								var context = canvas.getContext('2d');

								$(canvas).toggle(function(event) {
									// 위치 얻기
									var position = $(this).offset();
									var x = event.pageX - position.left;
									var y = event.pageY - position.top;

									// 선그리기
									context.beginPath();
									context.moveTo(x, y);
								},function(event) {
									// 위치 얻기
									var position = $(this).offset();
									var x = event.pageX - position.left;
									var y = event.pageY - position.top;		
									
									// 선그리기
									context.lineTo(x, y);
									context.stroke();
								});
							});							
						

문서 객체와 마우스 커서의 상대 위치를 구하는 방법
캔버스의 좌상단 위치를 기준으로 해서 마우스가 찍히는 위치를 알아내는 방법

							// 위치 얻기
							var position = $(this).offset();
							var x = event.pageX - position.left;
							var y = event.pageY - position.top;													
						


unbind()

  1. $(selector).unbind() : 해당 문서 객체와 관련된 모든 이벤트 제거 <-- 테스트 하려면 클릭
  2. $(selector).unbind(eventName) : 해당 문서 객체의 특정 이벤트와 관련된 모든 이벤트 제거
  3. $(selector).unbind(eventName, function) : 해당 문서 객체의 특정 이벤트 핸들러 제거


trigger()

  1. $(selector).trigger(eventName) <-- 테스트 하려면 클릭
  2. $(selector).trigger(eventName, data)


preventDefault() / stopPropagation()



preventDefault()를 사용하지 않으면 a hyperlink 기능이 작동하게 되고, stopPropagation()을 사용하지 않으면 click 이벤트가 걸려 있는 부모 엘리먼트로 click이벤트가 전파됩니다. stopPropagation() 메서드와 preventDefaul() 메서드를 함께 사용하는 경우가 많으므로, jQuery는 간단하게 return false를 사용하여 이 두 가지를 함께 적용학는 것으로 인식합니다.
참고로, 기존 자바스크립트는 return false를 사용하면 기본 이벤트만 제거된다는 점에 주의하세요.