이벤트리스너(event listener)

이벤트리스너(event listener)란?

• 브라우저 상에서 벌어지는 어떠한 행동을 이벤트(event)라고 하는데, 예를 들면 키보드가 누름(keydown), 마우스 클릭(click), 요소에 커서 올리기(mouseover) 등이 있다.
• 이벤트 리스너(event listener)는 이벤트를 읽어내고 요소를 제어하는 함수를 일컫는다.
• 참조 URL - https://developer.mozilla.org/ko/docs/Web/Events

이벤트리스너 사용하기

• 셀렉터 뒤에 .addEventListener('이벤트', 함수이름(){함수내용}) 로 지정이 가능하고, 첫번째 인수에 지정한 이벤트가 실행되면, 두번째 인수에 지정한 익명함수가 실행된다.
• 여기서 지정된 익명함수를 Event Listener 혹은 Event Handler라고 한다.

예시

<div id="target">여기에용</div>
<button onclick="textChange()">Change!</button>

function textChange() {
	document.getElementById('target').innerHTML = 'Text changed!';
}

• Change! 버튼을 누르면 div 안의 내용이 'Text changed!'로 변경되는 코드

이벤트리스너를 사용하여 onclick 속성 없애기

<!--HTML-->
<div id="target">여기에용</div>
<button id="changeBtn">Change!</button>

//JS
let changeBtn = document.getElementById('changeBtn');
let target = document.getElementById('target');
//지정할 셀렉터를 변수로 지정하여 아래의 코드 길이 줄이기

changeBtn.addEventListener('click', function() {
    target.innerHTML = 'Text changed!';
})
//이벤트인 click이 발생하면 익명함수의 내용이 호출된다.

• 위 처럼 이벤트리스너를 활용하면 HTML에 onclick 속성을 사용하지 않고, JS 내에서 더 다양한 이벤트로 HTML을 제어 할 수 있다.

+

• 생각해보면 일일히 기능 추가 할 때 html 문서가서 onclick 추가하느니, JS 한번에 제어하는게 맘 편하고 쉬울거같다.
  혹시라도 실수하는 경우 JS 문서만 수정하면 되니까.