🌎 Web/JavaScript
[JavaScript] 자바스크립트의 이벤트(event)
오늘 ONEUL
2022. 4. 5. 02:59
이벤트란?
- 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
- 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
- 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다.
이벤트 리스너(event listener)
- 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다.
- 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.
이벤트 리스너 등록
작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다.
- 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법
- 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법
객체나 요소에 프로퍼티로 등록하는 방법
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() 메서드를 사용해야 한다.
※ 참고 자료