[JavaScript] 자바스크립트의 이벤트(event)

이벤트란?

• 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
• 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
• 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다.

 

 

 

 

이벤트 리스너(event listener)

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

 

 

 

 

이벤트 리스너 등록

작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다.

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법
2. 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법

 

 

 

 

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

1. 자바스크립트 코드에서 프로퍼티로 등록 (단점 - 이벤트 타입별로 오직 하나의 이벤트 리스너만 등록할 수 있다.)

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

 

2. HTML 태그에 속성으로 등록 (단점 - 가독성이 좋지 않고, 유지보수가 힘들어진다.)

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

 

 

 

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

1. addEventListener() (장점 - 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있다.)

대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

 

2. attachEvent()

addEventListener() 메서드는 익스플로러 8과 그 이전 버전, 오페라 6과 그 이전 버전에서는 지원하지 않으므로, 대신에 이와 유사한 동작을 하는 attachEvent() 메서드와 detachEvent() 메서드를 사용해야 한다.

 

 

 

 

※ 참고 자료

http://www.tcpschool.com/javascript/js_event_concept

https://www.w3schools.com/js/js_events.asp