[JavaScript] 이벤트(Event)

[JavaScript] 이벤트(Event)공부방2023. 1. 13. 13:21@mag1c

Table of Contents

728x90

이벤트(Event)

사용자가 버튼을 눌렸을 때, 웹 페이지가 로드될 때, 특정 영역에 마우스가 올라갔을 때 등등등. 이벤트의 요소는 다양하다.

이 이벤트들은 DOM요소와 관련이 깊다.

이벤트가 발생하면 무언가가 이를 감지할 수 있어야 하며, 그에 대응하는 반응을 하여야 한다.

이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다.

이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.

이벤트리스너와 이벤트핸들러
이벤트 핸들러는 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것이다.

이벤트 종류

UI Event

Event	설명
load	웹, 스크립트 페이지 로드 완료시
unload	새로운 페이지 요청 등 웹페이지의 unload상태일 때
error	브라우저가 JS오류를 만났거나 요청값이 없을 때
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위 아래로 스크롤할 때
select	텍스트 선택 시

Keyboard Event

Event	설명
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 눌럿다 뗄 때
keycode	키의 코드값 (https://blog.lael.be/post/75)

Mouse Event

Event	설명
click	마우스 클릭 시
dbclick	더블클릭 시
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때(터치스크린 미작동)
mouseover	마우스를 요소 위로 움직였을 때(터치스크린 미작동)
mouseout	마우스를 요소 밖으로 움직였을 때(터치스크린 미작동)
mouserenter	마우스 커서를 올려놓을 때
mouseleave	마우스 커서를 빼낼 때

Focus Event

Event	설명
focus focusin	요소가 포커스를 얻었을 때
blur focusout	요소가 포커스를 잃었을 때

Form Event

Event	설명
input	input 또는 textarea 요소의 값이 변경되었을 때 contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때
submit	form을 submit할 때
reset	reset 버튼을 클릭할 때 (최근에는 사용하지 않음)

Clipboard Event

Event	설명
cut	컨텐츠 잘라내기
copy	컨텐츠 복사
paste	컨텐츠 붙여넣기

더 많은 이벤트들은 아래 페이지를 참고하자.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

이벤트 등록

inline 방식

// 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해 참조 가능
<input type="button" onclick="alert('Hello world, ' + this.value);" value="button" />

// script 탭에 함수를 만들고 태그에 지정하는 방식
<button onclick="myHandler1(); myHandler2();">Click me</button>
<script>
    function myHandler1() {
      alert('myHandler1');
    }
    function myHandler2() {
      alert('myHandler2');
    }
</script>

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

자바스크립트 코드에서 프로퍼티로 등록하거나, HTML 태그에 속성으로 등록할 수 있다.

각 방법들은 오직 하나의 이벤트 핸들러만 등록가능하거나, 가독성 및 유지보수성 저하라는 단점이 있다.

// JS코드에서 프로퍼티 등록 - 오직 하나의 이벤트만 등록이 가능.
window.onload = function() {                    // HTML 문서가 로드될 때 실행
    var text = document.getElementById("text");
    text.innerHTML = "HTML 문서가 로드되었음";
}

// HTML 태그에 속성으로 등록 - 가독성 및 유지보수성 저하
<p onclick="alert('문자열을 클릭했어요!')">ㅎㅇ</p>

addEventListener() 메서드 활용

addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 등록한다.

해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.

addEventListener 함수 방식은 이전 방식에 비해 아래와 같이 보다 나은 장점을 갖는다.

하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
캡처링과 버블링을 지원한다.
모든 DOM 요소(HTML, XML, SVG)에 대해 동작한다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성한다.

var btn = document.getElementById("btn");
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 = "마우스아웃";
}

// 삭제
function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "삭제 완료";
}

이벤트 핸들러 내부의 this

인라인 방식

전역 객체인 window를 가리킨다.

<button onclick="hello()">클릭</button>
 
<script>
    function hello () {
      console.log(this);    // window
    }
</script>

프로퍼티 방식과 addEventListener방식

이벤트(이벤트 리스너)에 바인딩된 요소를 가리킨다

<button class="btn">버튼</button>
 
<script>
    const btn = document.querySelector('.btn');
 
    btn.onclick = function (e) {
      console.log(this);                     // <button class="btn">Button</button>
      console.log(e.currentTarget);          // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
    };
</script>

<button class="btn">Button</button>
 
<script>
    const btn = document.querySelector('.btn');
 
    btn.addEventListener('click', function (e) {
      console.log(this);                     // <button class="btn">Button</button>
      console.log(e.currentTarget);          // <button class="btn">Button</button>
      console.log(this === e.currentTarget); // true
    });
</script>

이벤트 객체

이벤트를 발생시킨 요소와 발생한 이벤트에 대해 유용한 정보를 제공한다.

이벤트가 발생하면 이벤트객체는 동적으로 생성되며 이벤트 처리를 위해 이벤트 핸들러에 파라미터로 전달한다.

this와 이벤트 객체
this는 바인딩 된 DOM요소 자체를 가리키며, 이벤트 객체는 해당 이벤트가 발생한 객체를 가리킨다.

<p>클릭한 곳 좌표</p>
<h2 class="msg"></h2>
<script>
    function showJwapyo(e){
        const msg = document.querySelector('.msg');
        msg.innerHTML = 'x축 : ' + e.clientX + '<br>' + 'y축 : ' + e.clientY;
    }

    addEventListener('click', showJwapyo);

    const msg = document.querySelector('.msg')
    addEventListener('click', function(e){
        showJwapyo(e, msg);
    })
</script>

<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>
<button id="btn3">버튼3</button>

<script>
	function hide(e){
        if(e.target.id=='btn3'){
            btn1.style.visibility='';
            btn2.style.visibility='';
        }
        if(e.target.id=='btn1' || e.target.id=='btn2')
        e.target.style.visibility = 'hidden';
    }

    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    btn1.addEventListener('click',hide);
    btn2.addEventListener('click',hide);
    btn3.addEventListener('click',hide);
</script>

이벤트객체는 이벤트 핸들러에 암묵적으로 전달되지만, 이벤트 핸들러를 선언할 때, 전달받을 첫 번째 매개변수를 명시적으로 선언하여야 한다. 위에서 사용한 매개변수 e는 다른 이름으로 사용해도 된다.

이벤트 객체 Property

Property	설명
Event.target	이벤트를 발생시킨 요소를 가리킨다. 버블링에 의해 다른 타겟이 인식 될 수도 있다.
Event.currentTarget	이벤트에 바인딩 된 요소를 가리킨다(=this)
Event.type	이벤트의 종류를 나타내는 문자열을 반환한다
Event.cancelable	요소의 기본 동작을 취소시킬 수 있는지 여부를 Boolean값으로 반환한다
Event.eventPhase	이벤트 흐름 상에서 어느 단계에 있는지를 반환한다 0 = 이벤트 없음 / 1 = 캡쳐링 / 2 = 타깃 / 3 = 버블링

이벤트 위임

다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신 하나의 부모요소에 이벤트 핸들러를 바인딩하는 방법이다.

새로운 li요소를 추가하더라도 이벤트 처리는 부모요소인 ul에 위임되어있기 때문에 새로운 요소에 이벤트 핸들러를 다시 바인딩 할 필요가 없다.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>
<script>
    const ul = document.querySelector('ul')
    const h1 = document.querySelector('h1')
    var num = 0;
    ul.addEventListener('click', function(e){
        e.target.classList.toggle('clicked');
        h1.textContent = e.target.textContent + '이(가) 클릭됨'
    })
</script>

이벤트 중단

event.preventDefault();

현재 이벤트의 동작을 중단한다.

event.stopPropagation();

현재 이벤트의 버블링을 중단한다.

event.stopImmediatePropagation();

현재 이벤트의 버블링을 중단하며, 같은 레벨에 있는 이벤트도 중단한다.

참조

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

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%F0%9F%92%AF-%EC%B4%9D-%EC%A0%95%EB%A6%AC#%EC%9D%B4%EB%B2%A4%ED%8A%B8_%ED%95%B8%EB%93%A4%EB%9F%AC_%EB%82%B4%EB%B6%80%EC%9D%98_this_%EC%9D%B4%EC%9A%A9