[제이쿼리] 이벤트 등록 방식 알아보기 : Programming Story

이벤트란? 사이트에서 방문자가 취하는 모든 행위!

$("#btn").click(function(){
 //
 });

위와 같은 코드에서 "#btn" 은 이벤트의 대상, click()는 이벤트 등록 메서드, function(){} 은 이벤트 핸들러를 각각 의미하게 된다.

이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식, 이렇게 두 가지 종류가 있다.

1. 단독 이벤트 등록 메서드

단독 이벤트 등록 메서드는 말 그대로 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있는 메서드이다.

$("이벤트 대상").이벤트등록메서드(function(){

//event handle

});

위의 코드가 단독 이벤트 등록 메서드의 기본형이라고 할 수 있다.

만약,

<body>
	<p>
	<button class="btn1">버튼1</button>
	</p>
	<p>내용1</p>
	<p>
		<button class="btn2">버튼2</button>
	</p>
	<p>내용2</p>
</body>

위와 같은 html 코드가 있고 버튼1을 누르면 내용1의 글자의 색깔을 변경하고 싶다면,

$(".btn1").click(function(){
		$(".btn1").parent().next()
		.css({"color":"#f00"});
	});

위의 코드처럼 작성할 수 있을 것이다.

2. 그룹 이벤트 등록 메서드

반면, 우리가 개발을 하다 보면 대상에 한 가지 동작 이상의 이벤트를 등록하고 싶은 경우가 많아진다. 이 경우 그룹 이벤트 등록 메서드를 사용하면 된다. 이 경우에는 on() 메서드를 사용하면 된다.

on() 메서드를 등록하는 방식에는 여러가지가 있는데 그 중 가장 대표적인 방식을 알아보자.

$("이벤트 대상").on("이벤트종류1 이벤트종류2 ...", function(){

//코드

});

위와 같은 기본형을 가지고 있다.

ex) 버튼에 마우스를 올렸을 때 console에 "welcome"을 띄우는 이벤트를 등록하고 싶을때

$(".btn1").on("mouseover focus", function(){
console.log("welcome");
})

위와 같이 표현할 수 있다. 위 코드 중 "mouseover focus"는 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생되는 마우스 이벤트 중 하나이다.

만약 버튼에 마우스를 올렸을 때 색깔이 변하고, 다시 마우스를 떼면 색깔이 원래로 돌아오게 만들기 위해서는 그룹 이벤트 등록 메서드를 사용해야 한다.

$(".btn2").on({
		"mouseover focus": function() {
			$(".btn2").parent().next()
			.css({"color":"#0f0"});
		},
		"mouseout blur": function() {
			$(".btn2").parent().next()
			.css({"color":"#000"});
		},
	});

그러한 효과를 주기 위해서는 "mouseover focus"와 "mouseout blur" 효과를 on method를 사용하여 적용시켜주면 된다.