TIL.Event Listener

이벤트 리스너

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가르킨다, 이벤트(event handler)라고도 한다.
지정된 타입의 이벤트가 특정 요소에 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

이벤트 리스너 등록

작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다.
객체나 요소에 이벤트 리스너를 어떻게 등록할 수 있을까?

1) 객체나 요소에 프로퍼티로 등록하는 방법

• 자바스크립트 코드에서 프로퍼티로 등록

window.onload=function(){//이 함수는 HTML문서가 로드될 때 실행됨
  var text=document.getElementById("text")//id가 text인 요소를 선택
  text.innerHTML="HTML문서가 로드되었습니다"

자바스크립트 코드에서 프로퍼티로 등록하는 방법은 거의 모든 브라우저가 대부분의 이벤트 타입을 지원하고 있다. 이 방법의 단점은 이벤트 타입별로 오직 하나의 이벤트 리스너만 등록할 수 있다.

• HTML태그에 속성으로 등록
  아래와 같이 HTML태그에 속성으로 이벤트 리스너를 등록할 수도 있다. 이 방법의 단점은 HTML코드에 자바스크립트 코드가 추가됨으로써 가독성이 안좋아지며, 유지보수도 힘들어진다.

<p onclick="alert('문자열을 클릭했어요!')"> 이 문자열 클릭해보세요!</p>

2) 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

1.addEventListener()
2.attachEvent()

addEventListener()메소드는 거의 모든 브라우저에서 지원하는 이벤트 리스터 등록을 위한 메소드다.

element.addEventListener(이벤트명, 실행할 이벤트리스너,이벤트 전파방식)

1.이벤트명:이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다.(ex,'click')
2.실행할 이벤트 리스너:지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달한다. (doSomething)
3.이벤트 전파방식:false면 버블링방식으로 true면 캡쳐링 방식으로 이벤트를 전파한다.

var showBtn=document.getElementById("btn");// id가 "btn"인 요소 선택
showBtn.addEventListener("click",showText)//선택한 요소에 click이벤트리스너를 등록함

여러 개의 이벤트 리스너 등록

addEventListener()메소드를 사용하면 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있다.

var btn = document.getElementById("btn");        // 아이디가 "btn"인 요소를 선택함.

btn.addEventListener("click", clickBtn);         // 선택한 요소에 click 이벤트 리스너를 등록함.

btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함.

btn.addEventListener("mouseout", mouseoutBtn);   // 선택한 요소에 mouseout 이벤트 리스너를 등록함.

function clickBtn() {
    document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
}
function mouseoverBtn() {
   document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
}
function mouseoutBtn() {
    document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
}

이벤트 리스너 삭제
removeEventListener()메소드를 사용하면 등록된 이벤트 리스너를 손쉽게 삭제할 수 있다.

function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";
}

addEventListener로 등록할 수 있는 이벤트 목록

참고:http://www.tcpschool.com/javascript/js_event_eventListenerRegister
https://chlolisher.tistory.com/10