[TCP School/자바스크립트] 이벤트 - 이벤트 리스너 등록

이벤트 리스너

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

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

---

이벤트 리스너 등록

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

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

 

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법

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

---

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

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

 

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

2. HTML 태그에 속성으로 등록

 

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

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

 

이 문자열은 HTML 문서가 로드되면 다른 문자열로 바뀜

<p id='text' style="font-size: 20px; color: red;">이 문자열은 HTML 문서가 로드되면 다른 문자열로 바뀜</p>

<script>
    window.onload = function() {
        var text = document.getElementById('text');
        text.innerHTML = 'HTML문서가 로드됨';
    }
</script>

 

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

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

 

텍스트를 클릭

<p id='text' onclick="alert('텍스트를 클릭함')" style="font-size: 20px; color: red;">텍스트를 클릭</p>

---

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

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

 

1. addEventListener()

2. attachEvent()

 

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

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

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

이벤트 명 -> 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달

실행할 이벤트 리스너 -> 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달

이벤트 전파 방식 -> false면 버블링 방식으로, true면 캡쳐링 방식으로 이벤트를 전달

 

<button id='button' style='width: 170px; border: 1px solid black;'>텍스트 보기</button>
<p id='text'></p>

<script>
    var showBtn = document.getElementById('button1');
    showBtn.addEventListener('click', showText);
    
    function showText() {
         document.getElementById('text').innerHTML = '텍스트';
    }
</script>

---

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

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

 

<button id='button' style='width: 170px; border: 1px solid black;'>버튼</button>
<p id='text'></p>

<script>
    var btn = document.getElementById('button');
    btn.addEventListener('click', clickBtn);
    btn.addEventListener('mouseover', mouseoverBtn);
    btn.addEventListener('mouseout', mouseoutBtn);

    function clickBtn() {
        document.getElementById('text').innerHTML = '버튼 클릭';
    }

    function mouseoverBtn() {
        document.getElementById('text').innerHTML = '버튼 마우스오버';
    }

    function mouseoutBtn() {
        document.getElementById('text').innerHTML = '버튼 마우스아웃';
    }
</script>

---

이벤트 리스너 삭제

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

 

<button id='button' style='width: 170px; border: 1px solid black;'>삭제 버튼</button>
<p id='text'></p>

<script>
    var btn = document.getElementById('button');
    btn.addEventListener('click', clickBtn);
    btn.addEventListener('mouseover', mouseoverBtn);
    btn.addEventListener('mouseout', mouseoutBtn);
    
    function clickBtn() {
        btn.removeEventListener('mouseover', mouseoverBtn);
        btn.removeEventListener('mouseout', mouseoutBtn);
        document.getElementById('text').innerHTML = '이벤트 리스너 삭제됨';
    }
    
    function mouseoverBtn() {
        document.getElementById('text').innerHTML = '버튼 마우스오버';
    }
    
    function mouseoutBtn() {
        document.getElementById('text').innerHTML = '버튼 마우스아웃';
    }
</script>

---

TCP School의 강의 내용을 정리한 포스트입니다.

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

코딩교육 티씨피스쿨