[jQuery] 이벤트 (Event)

 

목차

 

이벤트 (Event)

이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)입니다. 웹 페이지 안에서 발생한 여러 가지 이벤트를 이벤트 핸들러(event handler)를 이용해 처리할 수 있습니다. jQuery는 JavaScript보다 훨씬 간편하게 이벤트 처리를 할 수 있습니다. JavaScript에서의 이벤트 처리를 자세히 알아보고 싶다면 이 글을 참고해 주세요.

 

 

jQuery 기본 이벤트

메소드	설명
.ready(function)	HTML의 DOM 요소들이 모두 사용할 준비가 되면 function 함수가 실행된다.
.bind(eventType [, eventData], function(eventObject))	요소에 이벤트 핸들러를 연결한다. eventType에 해당되는 이벤트가 발생하면 function에 이벤트를 전달한다.
.on(events [, selector] [, data], function)	요소에 이벤트 핸들러를 연결한다. jQuery 1.7 버전부터 모든 이벤트 처리는 on() 메소드를 사용할 것을 권장한다.
.one(events [, selector] [, data], function)	.on() 메소드와 동일하나, 이벤트가 한번만 실행된다.
.trigger(eventType [, extraParameters])	이벤트가 발생할 때 실행될 함수나 .on() 메소드로 연결된 어떤 이벤트 핸들러를 강제적으로 실행시키는 메소드이다. 즉, 함수를 강제적으로 실행시킬 때 사용된다.
.unbind(eventType [, function])	이전에 .bind() 메소드로 설정했던 이벤트 핸들러를 제거한다.
.off(events [, selector] [, function])	이전에 .on() 메소드로 설정했던 이벤트 핸들러를 제거한다.

 

on, off

<script type="text/javascript">
$(document).ready(function () {
	$("#a").on("click mouseover", function () { //두가지 이벤트 설정
		$("#result").text(event.screenX);
	});
	//b클릭시 a에 연결된 이벤트 off시킴
	$("#b").on("click", function () {
		$("#a").off("click mouseover"); //이벤트의 제거
	});
});
</script>
<button id="a">ok</button>
<button id="b">cancel</button>
<div id="result"></div>

 

trigger

<script type="text/javascript">
$(document).ready(function () {
	$("#a").on("click mouseover", function () {
		console.log("a버튼 OK");
	});
	//b 클릭이벤트 발생하면 a 클릭이벤트 발생시킴  
	$("#b").on("click", function () {
		console.log("trigger 버튼 클릭");
		$("#a").trigger("click"); //다른 이벤트를 강제 실행함 
		console.log("a버튼 클릭실행한후 ");
	});
});
</script>
<button id="a">ok</button>
<button id="b">ok-trigger</button>

 

 

주요 이벤트

분류	이벤트명	발생 타이밍
마우스	click	마우스 클릭 시
	dblclick	더블클릭 시
	mousedown	마우스 버튼을 눌렀을 때
	mousemove	마우스 포인터가 이동했을 때
	mouseout	요소에서 마우스 포인터가 떨어졌을 때
	mouseover	요소에 마우스 포인터가 겹쳤을 때
	mouseup	마우스 버튼을 떼어 놓았을 때
	mouseenter	요소에 마우스 포인터가 진입했을 때
	mouseleave	요소에서 마우스 포인터가 빠져나올 때
	hover	요소에 마우스 포인터가 진입하고 빠져나올 때
키	keydown	키를 눌렀을 때
	keypress	키를 누른 상태
	keyup	키를 떼어 놓았을 때
폼	change	내용이 변경되었을 때
	reset	리셋 버튼이 눌렸을 때
	submit	서브밋 버튼이 눌렸을 때
포커스	blur	요소로부터 포커스가 벗어났을 때
	focus	요소가 포커스되었을 때

 

마우스 이벤트

<script type="text/javascript">
//hover: mouseenter와 mouseleave 이벤트 발생시 functionIn과 functionOut이 실행됨 
$(document).ready(function () {
	$("li").hover(
		function () { //mouseenter
			$(this).append($("<span>***</span>"));
		},
		function () { //mouseleave
			$(this).find("span").remove(); //span태그 찾아서 제거
		}
	);
});
</script>
<ul>
	<li>홍길동</li>
	<li>이순신</li>
	<li>유관순</li>
	<li>강감찬</li>
</ul>

 

키보드 이벤트

<script type="text/javascript">
$(document).ready(function () {
	$("#test").on("keydown", function () {
		$("#result").text(event.key+" "+event.code+" "+event.keyCode); 
	});
});
</script>
<p>keydown 실습 </p>
<input type="text" id="test">
<div id="result"></div>

 

form 이벤트

<script type="text/javascript">
$(document).ready(function () {
	//아이디 안썼을경우 제출 금지
	$("form").submit(checkId);
});
function checkId() {
	if ($("#userid").val().length == 0) {
		alert("아이디를 입력하세요");
		return false;
	}
}
</script>
<form action="target.html" >
아이디:<input type="text" name="userid" id="userid"><br>
<input type="submit" value="로그인">
</form>

 

 

event.data

이벤트 발생시 이벤트 객체에 매개변수로 데이터를 전달할 수 있습니다. 이벤트 핸들러에 바인딩된 데이터는 event.data 객체에 저장되며 키값을 이용해 데이터를 사용할 수 있습니다.

<script type="text/javascript">
$(document).ready(function () {
	//클릭 이벤트 발생시 두번째 인자로 json 객체 넘겨줌 
	$("#a").on("click", {foo:"bar", test:"abc"}, function (event) {
		console.log(event.data.foo); //bar
		console.log(event.data.test); //abc
	});
});
</script>
<button id="a">ok</button>

 

 

 

참고

https://api.jquery.com/