자바 스크립트를 배우고 정리하는 두번째 시간이다 전편에 이어 이번에는 이벤트 리스너에 대해서 배워보도록 하자
EventListener란
EventTarget.addEventListener()
원문을 읽어보면 이벤트 리스너란 EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있습니다.
전편에 보여준 코드와 비교를 하며 어떤 식으로 이벤트 리스너를 사용하는지 확인해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
<link rel = "stylesheet" href="main.css"> <!-- 여기에 링크 -->
</head>
<body>
<div class = "alert-box" id="alert">
행우의 자바스크립트 입니다
<button onclick="Alert('none')">닫기</button>
</div>
<button onclick="Alert('block')">열기</button>
<script>
function Alert(buttonFun){
document.getElementById('alert').style.display= buttonFun;
}
</script>
</body>
</html> 앞서 리뷰했던 코드를 가져왔다 HTML 스크립트 태그 안에 버튼 기능을 사용하는 function을 넣었었다 button 태그에서 onclick 속성을 이용하여 function의 파라미터를 이용하여 보다 간편하게 코드를 작성할 수 있었다.
하지만 여기서 더 클린코드를 하고 싶은건 개발자들의 마음.. 기능만 구현한다면 최대한 짧게 짧게 재사용이 가능하도록 할 것이다.
그래서 이번에 쓰이는 것이 EventListener이다
.addEventListener()
원문에도 찾아본다면 .addEventListener() 메서드는 지정한 이벤트 유형의EventTarget 수신기 리스트에 EventListener를 구현한 함수 또는 객체를 추가하는 방식으로 동작합니다. 추가하려는 함수 또는 객체가 이미 수신기 리스트에 포함되어 있는 경우에는 추가하지 않으므로 수신기는 중복으로 등록되지 않습니다. 라고 확인할 수 있다.
구문
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);구문 해석
[type]
수신할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
[listener]
지정한 이벤트(Event 인터페이스를 구현한 객체)를 수신할 객체입니다. handleEvent() 메서드를 포함하는 객체 또는 JavaScript 함수
[options]
이벤트 수신기의 특징을 지정할 수 있는 객체입니다. 가능한 옵션은 다음과 같습니다.
-
capture
이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다. 명시하지 않을 경우 기본 값은 false입니다. -
once
수신기가 최대 한 번만 동작해야 함을 나타내는 불리언 값입니다. true를 지정할 경우, 수신기가 발동한 후에 스스로를 대상에서 제거합니다. 명시하지 않을 경우 기본 값은 false입니다. -
passive
true일 경우, 이 수신기 내에서 preventDefault()를 절대 호출하지 않을 것임을 나타내는 불리언 값입니다. 이 값이 true인데 수신기가 preventDefault()를 호출하는 경우, 사용자 에이전트는 콘솔에 경고를 출력하는 것 외에 아무런 동작도 하지 않습니다. -
signal
AbortSignal입니다. 지정한 AbortSignal 객체의 abort() 메서드를 호출하면 이 수신기가 제거됩니다. 명시하지 않을 경우 이벤트 수신기가 아무 AbortSignal에도 연결되지 않습니다.
[useCapture]
이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다. 캡처 모드인 수신기는 DOM 트리의 위쪽으로 버블링 중인 이벤트에 의해선 발동하지 않습니다. 이벤트 버블링과 캡처링은 조상-자손 관계를 가진 두 개의 요소가 동일한 이벤트 유형에 대한 수신기를 가지고 있을 때, 두 요소에 이벤트가 전파되는 방법을 말합니다. 기본 값은 false입니다.
이를 읽고 이해했으면 기존 코드에서 변화를 줘보도록 해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행우의 자바스크립트</title>
<link rel = "stylesheet" href="main.css"> <!-- 여기에 링크 -->
</head>
<body>
<div class = "alert-box" id="alert">
행우의 자바스크립트 입니다
<button id="close">닫기</button>
</div>
<button onclick="Alert('block')">열기</button>
<script>
document.getElementById('close').addEventListener(
'click', function(){
document.getElementById('alert').style.display= 'none';
}
);
function Alert(buttonFun){
document.getElementById('alert').style.display= buttonFun;
}
</script>
</body>
</html>
필자는 닫기 버튼을 이벤트 리스너로 변형 시켰고 열기 버튼는 기존과 같은 형식으로 두어 같은 결과가 나오는지 비교를 해보기로 했다
앞에 코드와 이벤트 리스너를 적용한 모습과 같은 결과를 보이지만 버튼의 onclick속성을 쓰지않고 id 하나로만 적용을하여 쓴다면 위와 같은 기초적인 코드보다 향후 재사용을 많이 하는 코드작성 시 효율적 관리를 할 수 있을 거라고 생각한다
