[제이쿼리] 이벤트 강제 발생/ 이벤트 제거 : Programming Story

전의 포스트에서 제이쿼리의 이벤트 등록 방식을 알아보았다. 하지만 전의 포스트에서는 '사용자'의 이벤트 (클릭, 마우스 등)으로 인해 효과가 나타난 것이었다. 만약, 사용자의 이벤트가 아니어도 효과를 주고 싶다면 어떻게 할 수 있을까? 제이쿼리에서는 강제로 이벤트를 발생시키는 방법이 존재한다.

오늘 포스팅에서는 강제로 이벤트를 발생시키고, 이벤트를 제거할 수 있는 방법 또한 알아보겠다.

1. 강제로 이벤트 발생시키기

$("이벤트 대상").trigger("이벤트종류");

$("이벤트 대상").단독이벤트등록메서드();

강제로 이벤트를 발생시키기 위해서는 위의 두 가지 기본형을 사용하면 된다.

예를 들어 "mouseover" 이벤트를 강제로 btn에다가 적용시키고 싶다면,

$(".btn1").trigger("mouseover");

위의 코드를 작성할 수 있다.

물론 "mouseover" 이벤트가 강제로 발생이 되면 어떤 일이 일어날지를 명시해주는 코드가 있어야 한다.

예를 들어,

$(".btn1").on({
			"mouseover focus": function() {
				$(".btn1").parent().next( )
				.css({"color":"#0f0"});
			}
	});

위와 같은 코드가 있다면 trigger("mouseover")가 되었을 때 위의 on method에 명시된 이벤트가 일어나는 것이다.

만약 btn2에다가 단순히 click 이벤트가 강제로 실행되게 하고 싶다면,

$(".btn2").click();

이런식으로 강제 이벤트 발생을 시킬 수 있다. 이 또한 마찬가지로 click을 했을 때 어떤 일이 일어나기를 원하는지 기대효과를 명시해주어야 한다.

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

위의 코드가 있다면 사용자가 클릭을 하지 않아도 해당 효과가 나타나는 것이다.

만약 강제로 이벤트를 발생시키는 것이 아니라 사용자의 이벤트에 따라 일어나는 것을 기대한다면 등록 메서드만 사용하고 강제 이벤트 발생부분은 코드에서 제외시키면 된다.

위의 내용을 적용시켜 코딩을 한 번 해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(".btn1").click(function(){
			$(".btn1").parent().next( )
			.css({"color":"#00f"});
	});

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

	$(".btn1").click();   
	$(".btn2").trigger("mouseover");
});
</script>
</head>
<body>
	<p>
	<button class="btn1">First Button</button>
	</p>
	<p>강제 클릭</p>
	<p>
		<button class="btn2">Second Button</button>
	</p>
	<p>강제 마우스 효과</p>
</body>
</html>

위와 같은 코드를 작성해보았다. 그러면 강제 이벤트 발생 부분이

$(".btn1").click();   
$(".btn2").trigger("mouseover");

이렇게 두 부분이 들어간 것이 보일 것이다. 그러면 Chrome에서 결과를 확인해보았을 때 (Visual Studio Code에서 control + Alt+ O를 하고 크롬을 선택해주면 됨) 사용자의 클릭이나 마우스 이벤트 없이도,

위 결과와 같이 원하는 효과가 나온다는 것을 알 수 있다.

2. 이벤트 제거 메서드

다음으로 이미 등록한 메서드를 제거하는 방법을 살펴보겠다.

제거하는 방법은 간단하다.

$("이벤트 대상").off("제거할 이벤트 종류");

위의 기본형을 사용해주면 된다.

만약 click 이벤트를 등록했는데 해당 이벤트를 제거하고 싶다면 단순히,

$(".btn1").off("click");

이런식으로 코드를 작성해 볼 수 있다.

"click" 부분에 "mouseover focus" 등 다양한 이벤트로 바꾸면 여러 이벤트에 모두 응용이 가능하다.

off 가 포함된 코드를 작성한 후 확인해보면 정말로 이벤트 등록 메서드가 있더라도 반응하지 않는다는 것을 알 수 있다.