addEventLister의 정의 : 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 기능
-----> addEventListener가 특정 이벤트 발생 시 특정 함수를 실행시킨다면, removeEventListener는 등록된 이벤트리스너를 지우는 역할을 합니다.
- 사용법
addEventListener
var st = document.getElementById("stalker");
st.addEventListener('이벤트종류', '함수이름');
removeEventListener
(이벤트리스너가 등록된 후)st.removeEventListener('이벤트종류', '함수이름');
예제
<html>
<head>
<title>addEventListener, removeEventListener</title>
<script>
window.onload = function () { // onload는 속성이자 이벤트 : 전체 문서가 끝까지 load되면 함수를 실행해라
var color1 = document.getElementById("change_green");
var color2 = document.getElementById("change_red");
var btnExample = document.getElementById("btnExample"); // 모두 변수 선언 완료
color1.addEventListener("mouseover", changecolor); // mouseover가 발생되면 함수 실행
color2.addEventListener("mouseover", changecolor2);
btnExample.addEventListener("click", btnExampleClickHandler);
}
function changecolor(){
title.style.color = 'green';
}
function changecolor2() {
title.style.color = 'red';
}
function btnExampleClickHandler() {
alert("메세지입니다. 저는 다시는 보이지 않습니다.");
btnExample.removeEventListener("click", btnExampleClickHandler); // 클릭되면 등록된 이벤트리스너를 지운다.
}
</script>
</head>
<body>
<h1 id="title">change color</h1>
<br/>
마우스만 올려도 색깔 바뀌는 버튼: <button id="change_green">green</button> <button id="change_red">red</button>
<br/>
<button id="btnExample">한번만 메세지 띄우는 버튼</button>
</body>
</html>
코드 설명
'green', 'red' 버튼은 mouseover로 이벤트가 지정되어 있기 때문에 버튼에 마우스만 올려도 글자의 색깔이 바뀝니다. 또, 경고창을 띄우는 이벤트리스너는 한 번 사용된 후 removeEventListener가 지우기 때문에 두 번째 버튼 클릭부터는 경고창이 뜨지 않습니다.
예제2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트 기초</title>
<style>
body { font-size: 3rem;}
h1 { background-color: #fff000;}
.menu {
display: flex; // 들어있는 태그들을 수평으로 1행으로 정렬하여 들어가게 함
}
.menu-link {
margin: .1em;
padding: .3em;
color: #fff;
text-decoration: none;
background: dodgerblue;
list-style: none;
}
.menu-active { // 추가할 클래스
background: orange;
}
</style>
</head>
<body>
<h1 id="main-title">Event</h1>
<nav class="menu">
<a href="#" class="menu-link" data-menu="1">menu 1</a>
<a href="#" class="menu-link" data-menu="2">menu 2</a>
<a href="#" class="menu-link" data-menu="3">menu 3</a>
</nav>
<script>
var menuLinks = document.querySelectorAll('.menu-link');
function clickMenuHandler() { // on____(예: onclickMenu), _____Listener(예: clickMenuListner), _____Handler 보통 이런 이름들을 많이 씀.
for (var i = 0; i < menuLinks.length; i++){
menuLinks[i].classList.remove('menu-active');
}
this.classList.add('menu-active');
}
for (var i = 0; i < menuLinks.length; i++){
menuLinks[i].addEventListener('click', clickMenuHandler);
// for문으로 하나하나 탐색하여 그 중 click이라는 이벤트가 발생되면 clickMenuHandler라는 함수를 실행시킨다.
}
</script>
</body>
</html>
코드 설명
for문을 이용해서 'click'이라는 이벤트가 발생하면 clickMenuHandler라는 함수를 실행시키는데,
이 clickMenuHandler라는 함수는 '기존의 버튼의 색깔을 오렌지 색으로 바꾸는 클래스'를 클릭된 버튼에 추가한다. 하지만 다음 클릭을 행할 시, 아까의 시행으로 오렌지 색으로 변했던 버튼이 그대로 남아있음을 방지하기 위해
제거해주는 작업이 필요하다.
따라서 clickMenuHandler 함수에서는 for문을 반복하여 버튼의 오렌지 색깔이 적용된 클래스를 삭제해주고 클릭된 버튼은 다시 오렌지 색-클래스를 추가해준다.
하지만 이 코드는 좋은 코드가 아니다. 쓸데없는 for문의 반복이 많기 때문이다.
버튼이 10000000개라면 for문으로 오렌지 색깔이 적용된 클래스를 일일이 찾아서 삭제하는 것이 얼마나 많은 시간을 소비되게 할까?
그래서 이 코드는 단순히 참고용으로 보면 좋겠고 다음 포스트에서 더 좋은 코드에 대해서 다루어보도록 하겠다!
실행 화면
'🤹🏻♀️ Javascript' 카테고리의 다른 글
| html 객체 가져오기, window 이벤트 (0) | 2021.10.09 |
|---|---|
| 조건문, 반복문, 함수, 객체 등 (0) | 2021.10.03 |
| 문자열, 숫자, 불 값, 논리연산자, undefined 와 null (0) | 2021.10.02 |
| '이벤트 객체'를 통해서 메뉴 활성화 버튼 실습 (0) | 2020.05.06 |
| 클릭하면 버튼 색깔 바꾸기 (0) | 2020.05.03 |