07. 이벤트

42785 단어 DOMEventDOM

📌 7-1 이벤트란?

특정 사건을 처리하는 방법으로 JS에서는 특정 사건을 브라우저가 감지하여 함수를 호출하여 실행한다.

💡 호출하는 함수를 이벤트 핸들러라고 한다.

📌 7-2 이벤트 타입이란?

이벤트의 종류를 나타내며 마우스 이벤트, 폼 이벤트, 키보드 이벤트, 문서 이벤트, CSS 이벤트 등등이 있다.

📃 많이 사용하는 이벤트 목록

  1. 마우스 이벤트
이벤트 타입발생 시점
click요소 위에서 마우스 왼쪽 버튼을 눌렀을 때
contextmenu요소 위에서 마우스 오른쪽 버튼을 눌렀을 때
mouseover마우스 커서를 요소 위에서 움직일 때
mouseout마우스 커서가 요소 밖으로 움직일 때
mousedown요소 위에서 마우스 왼쪽 버튼을 누르고 있을 떄
mouseup요소 위에서 마우스 왼쪽 버튼을 뗄 때
mousemove마우스를 움직일 떄
  1. 폼 이벤트
이벤트 타입발생 시점
submit<form>을 제출할 때
focus요소에 포커스 할 때
  1. 키보드 이벤트
이벤트 타입발생 시점
keydown키보드 버튼을 누를 때
keyup키보드 버튼을 누르고 뗄 때
  1. 문서 이벤트
이벤트 타입발생 시점
DOMContentLoadedHTML이 로드 처리되어 DOM이 생성완료 되었을 떄
  1. CSS 이벤트
이벤트 타입발생 시점
transitionendCSS 애니메이션이 종료될 때

📌 7-3 이벤트 핸들러란?

이벤트가 발생할 때 실행되는 함수이다.

1. HTML 속성으로 접근하기
요소의 onclick 속성에 이벤트 핸들러 함수 alert( )를 할당하여 사용한다. 

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button" onclick="alert('Event')" >클릭</button>
    </body>
</html>

2. DOM 프로퍼티로 접근하기
DOM 프로퍼티에 접근하여 onclick이라는 속성에 접근해서 함수를 할당한다.

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        $btn.onclick = () => alert("Event");
    </script>
</html>

3. 이벤트 리스너를 사용하기
DOM 프로퍼티에 접근하여 addEventListener 메소드를 호출한다.

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        $btn.addEventListener("click", () => alert("Event"));
    </script>
</html>

📃 제일 많이 사용하는 방법으로 DOM 프로퍼티로 접근한 코드와 다른점은 다중의 이벤트를 연결시킬수 있다.

📌 7-4 addEventListener, removeEventListener

🧩EventTarget.addEventListener("eventType", eventHandler, [options])
🧩EventTarget.removeEventListener("eventType", eventHandler, [options])

1. addEventListener의 특징

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        $btn.onclick = () => alert("Event1");
        // 마지막에 등록한 이벤트 핸들러만 호출됨
        $btn.onclick = () => alert("Event2");
    </script>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        // 두개의 이벤트 핸들러가 전부 호출됨
        $btn.addEventListener("click", () => alert("Event1"));
        $btn.addEventListener("click", () => alert("Event2"));
    </script>
</html>

🔥 addEventListener를 사용하면 유동적이게 이벤트를 제공할 수 있으며 다수의 이벤트도 연결이 가능하여 addEventListener 메소드를 사용함

2. removeEventListener 특징

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        // 이벤트 핸들러
        const event1 = () => alert("Event1");
        const event2 = () => alert("Event2");
        // 2개의 클릭 이벤트를 등록
        $btn.addEventListener("click", event1);
        $btn.addEventListener("click", event2);
        // 클릭 이벤트와 event2의 핸들러를 호출하는 이벤트 제거
        $btn.removeEventListener("click", event2);
    </script>
</html>

🔥 이벤트와 이벤트 핸들러가 정확히 일치해야 사용이 가능하다.

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        $btn.addEventListener("click", () => alert("Event1"));
        $btn.addEventListener("click", () => alert("Event2"));
        // alert("Event2")를 참조할 수 없음
        $btn.removeEventListener("click", () => alert("Event2"));
        // 실행결과 : Event1, Event2 경고창이 그대로 출력된다.
    </script>
</html>

🔥 이벤트와 핸들러가 일치 하지 않는 이유는 addEventListener 메소드 안에 있는 함수를 밖에 있는 removeEventListener가 같은 내용의 함수지만 메모리상의 주소에서 alert("Event2")의 주소를 참조할 수 없다.

📌 7-5 이벤트 객체란?

이벤트가 발생하면 이벤트에 관련된 이벤트 객체가 생성되어 이벤트 핸들러의 첫 번째 인수로 전달된다.

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        // 함수 생성
        const eventHandler = (param) => console.log(param);
        // 함수 실행
        eventHandler(1);
        // 이벤트 핸들러로 함수를 전달
        $btn.addEventListener("click", eventHandler);
    </script>
</html>

🔥 이벤트 핸들러로 사용하기 전에 함수를 호출하면 넣어준 인자가 출력되지만 이벤트 핸들러로 함수가 사용되고 이벤트가 실행되면 이벤트 객체가 첫 번째 인자로 출력된다.

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <button id="btn" type="button">클릭</button>
    </body>
    <script>
        const $btn = document.querySelector("#btn");
        // 이벤트가 발생하면 이벤트 객체가 첫 번째 인수로 전달된 걸 확인하기 위해 로그 출력
        $btn.addEventListener("click", (e) => {
            console.log(e);
        });
    </script>
</html>

📃 마우스 클릭에 관련된 이벤트 객체가 생성된다.

📌 7-6 이벤트 객체의 사용 예시

<!DOCTYPE html>
<html>
    <head>
        <title>이벤트</title>
    </head>
    <body>
        <ul id="animals">
            <li id="dog">개</li>
            <li id="cat">고양이</li>
            <li id="pig">돼지</li>
        </ul>
    </body>
    <script>
        const $animals = document.querySelector("#animals");
        $animals.addEventListener("click", (e) => console.log(e.target));
    </script>
</html>

🔥 클릭 이벤트를 ul에 걸어주고 개, 고양이, 돼지를 클릭하면 이벤트를 발생 시킨 해당 li태그가 호출된다. 이벤트 객체 프로퍼티중 target은 이벤트를 발생시킨 해당 객체를 알려준다. 이런 프로퍼티를 이용해서 이벤트 위임을 구현할 수 있다.

시간이 지나고 보이는 것들 | 스프린트 short.ly (부제: Sequelize)
c fgets() 함수 구현하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage