[JavaScript] 이벤트 리스너 등록

2022. 7. 5. 20:23·Language/JavaScript
728x90

이벤트 리스너(event listener)

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다.

지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.


이벤트 리스너 등록

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

객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다.

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

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

객체나 요소에 프로퍼티로 이벤트 리스너를 등록할 때는 다음과 같은 방법을 사용할 수 있다.

  • 자바스크립트 코드에서 프로퍼티로 등록
  • HTML 태그에 속성으로 등록

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

이 방법의 단점은 이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있다는 점이다.

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

또한, 다음과 같이 HTML 태그에 속성으로 이벤트 리스너를 등록할 수도 있다.

이 방법의 단점으로는 HTML 코드에 자바스크립트 코드가 추가됨으로써 가독성이 안 좋아지며, 유지보수도 힘들어진다.

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

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

객체나 요소의 메소드에 이벤트 리스너를 전달할 때는 다음 메소드를 사용할 수 있다.

  • addEventListener()
  • attachEvent()

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

이 메소드의 원형은 다음과 같다.

원형
대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)
  • 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다.
  • 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달한다.
  • 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파한다.
var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
showBtn.addEventListener("click", showText);  // 선택한 요소에 click 이벤트 리스너를 등록함.
function showText() {
    document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
}
※ 이벤트 리스너를 프로퍼티로 등록할 때는 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 한다.

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


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

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 = "이벤트 리스너가 삭제되었어요!";
}

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 예외 처리(exception)  (0) 2022.07.06
[JavaScript] 이벤트 리스너 호출  (0) 2022.07.05
[JavaScript] 이벤트의 개념  (0) 2022.07.05
[JavaScript] 타이머(timer)  (0) 2022.07.05
[JavaScript] 대화 상자  (0) 2022.07.05
'Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] 예외 처리(exception)
  • [JavaScript] 이벤트 리스너 호출
  • [JavaScript] 이벤트의 개념
  • [JavaScript] 타이머(timer)
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    react
    변수
    파이썬
    Python
    array
    next.js
    TypeScript
    리액트
    자바스크립트
    HTML
    Java
    object
    event
    제어문
    MySQL
    web
    CSS
    객체
    타입스크립트
    JavaScript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[JavaScript] 이벤트 리스너 등록
상단으로

티스토리툴바