JavaScript Event

Let's Just Go·2022년 6월 21일
JavaScript
0

JavaScript

목록 보기
6/10

JavaScript

Event

  • Event
    • 사용자가 브라우저에서 하는 모든 행위

Attribute

  • Attribute
    • Mouse Event
      • 마우스가 이벤트를 발생시키는 trigger
      • onclick, onmouseenter, onmouseleave 등이 존재
    • Keyboard Event
      • 키보드가 이벤트를 발생시키는 trigger
    • Code
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id = "btn" onclick="gretting()">클릭하세요</button>
    <!-- onclick은 클릭을 하게 되면 gretting함수를 불러옴 -->
    <button id = "btn2" onmouseenter="greeting()">마우스를 올리세요</button>
    <!-- 마우스를 올리면 gretting함수 불러옴 -->
    <button id = "btn3" onmouseleave="greeting()">마우스를 치우세요</button>
    <!-- 마우스를 치우면 gretting함수 불러옴 -->

    <script>

        // 이벤트 핸들러 (브라우저에게 전해줄 콜백 함수) 정의
        function greeting () {
            alert('안녕하세요');
        }

    </script>
</body>

</html>

Property

  • Property

    • 이벤트 핸들러

      • 브라우저에게 전해줄 callBack Function이며 특정 이벤트가 발생했을 때 실행시키고자 하는 것

    • $찾은요소.onclick = 이벤트 핸들러;

      • 찾은요소에서 클릭이 발생하면 이벤트 핸들러가 동작

    • $찾은요소.onmouseenter = function( alert(’하윙’); {}

      • 이벤트 핸들러를 바로 작성할 수 있음

    • $찾은요소.onmouseleave = () ⇒ alert(’신기하고만~’);

      • 이벤트 핸들러를 바로 작성할 수 있음

    • Property방식은 하나의 요소에 하나의 이벤트만 부여할 수 있음

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">클릭하세요</button>
    <button id="btn2">마우스를 올리세요</button>
    <button id="btn3">마우스를 치우세요</button>

    <script>
        // 이벤트 핸들러 (특정 이벤트에서 실행시키고자 하는 것)
        function hello() {
            alert('hello');
        }

        const $btn = document.getElementById('btn');
        const $btn2 = document.getElementById('btn2');
        const $btn3 = document.getElementById('btn3');

        $btn.onclick = hello;
        // $btn에 onclick이라는 event가 발생한다면 hello() 함수를 불러옴

        $btn2.onmouseenter = function () {
            alert('하윙');
        }

        $btn3.onmouseleave = () => alert('신기하고만~');

        // 핸들러 제거 
        $btn3.onmouseleave = null;
    </script>

</body>

</html>

AddEventListener

  • AddEventListener

    • 하나의 요소에 하나 이상의 Event를 부여할 수 있음

    • $찾은요소.AddEventListener(이벤트, 이벤트핸들러);

      • 특정 이벤트에 대해서 실행되는 이벤트 핸들러 함수 실행

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='btn'>Click</button>

    <script>
        const $btn = document.getElementById('btn');

        function hello() {
            alert('hello');
        }

        function c() {
            alert('world');
        }

        function e() {
            alert('bye');
        }

        $btn.addEventListener('click', hello);
        $btn.addEventListener('click', c);
        $btn.addEventListener('click', e);
        // 하나의 요소에 여러개의 event를 넣을 수 있음 

        // 이벤트 핸들러 제거 
        $btn.removeEventListener('click', c);
        // click이 발생했을 때 c이벤트 핸들러는 지움
    </script>
</body>

</html>

Event Object

  • EventObject

    • event 객체

      • 이벤트가 발생하면 이벤트에 대한 다양한 정보가 있는 이벤트 객체가 생성

      • 생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 자동 전달

      • 어떤 이벤트가 발생했는지에 따라 그에 맞는 객체가 알아서 전달(진짜 중요)

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        아무곳이나 클릭하세요.
    </p>

    <em class="message"></em>
    <!-- 강조 태그  -->

    <script>
        const $em = document.querySelector('.message');
        
        // 문서 전체에 이벤트 핸들러 등록 
        function a(event) {
            console.log(event);
            $em.textContent = `x : ${event.clientX}, y: ${event.clientY}`;
        // 이벤트 발생 좌표 입력
        }
        document.addEventListener('click', a);

        // document.addEventListener('click', (event) => {
        //     console.log(event);
        //     $em.textContent = `x : ${event.clientX}, y : ${event.clientY}`;
        // } )

        // event 객체 
        // 이벤트가 발생하면 이벤트에 대한 다양한 정보가 들어있는 이벤트 객체가 동적으로 생성 
        // 생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 자동 전달
        // 어떤 이벤트가 발생했는지에 따라 그에 맞는 객체 알아서 전달

        // callback함수에 매개변수로 아무이름이나 지정하면 event객체가 생성 
        // 여기서는 click으로 지정했기 때문에 click을 하면 event 객체가 생성됨

        
    </script>
</body>

</html>

Event Object Property

  • EventObject Property

    • 이벤트 객체.target

      • 이벤트가 일어난 요소를 찾을 수 있음

    • target을 활용하여 이벤트가 일어난 요소를 통해 값을 지정하거나 스타일을 변경하는 등 많이 사용

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <label>
        <input type="checkbox">
        <em class="message"></em>
    </label>

    <script>
        const $checkbox = document.querySelector('input[type="checkbox"]');
        const $em = document.querySelector('.message');

        function a(event) {
            // 실제로 event가 발생한 요소를 얻을 수 있음 
            console.log(event.target);

            $em.textContent = event.target.checked ? '체크O' : '체크X';
        }
        // checkbox에 event 설정 
        $checkbox.addEventListener('change', a)
    </script>
</body>

</html>

Mouse Event

  • Mouse Event

    • 마우스 드래그로 사용자가 원하는 위치에 box를 갖다 놓는 로직 구현

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 150px;
        height: 150px;
        background: skyblue;
        border: 10px solid greenyellow;
        border-radius: 100px;
        position: absolute;
        /* absolute는 relative로 지정한 부모를 기준으로 움직임 
        지금은 부모가 body니깐 body를 기준으로 left, top 지정  */
        left: 0;
        top: 0;
    }
</style>

<body>
    <div class="box"></div>

    <script>
        // 마우스를 눌렀을 때 event 발생하고 출발 좌표와 이동 좌표의 차를 구해서 값이 이동

        // 드래그 대상 요소 취득 
        const $box = document.querySelector('.box');

        // box 이동 좌표(x,y)를 담을 객체 생성 
        // 드래그 시작 지점의 마우스 포인터 위치 
        const initialMousePos = {
            x: 0,
            y: 0
        };
        // 객체 생성
        // offset : 이동할 거리 
        const offset = {

            x: 0,
            y: 0
        }
        // 객체가 있어야 이동 좌표들이 사라지지 않고 계속 유지됨

        // 이벤트 핸들러
        // 움직인 좌표를 설정해주고 실제 이동을 해주는 함수
        function move(event){
            // 오프셋 = 현재(드래그하는 시점)마우스 포인터 좌표 - 드래그 시작 시점 좌표

            // 객체에 값을 넣어줌
            offset.x = event.clientX - initialMousePos.x;
            // 이동한 x축 거리 (현재 있는 x좌표 - 시작지점 x좌표)
            offset.y = event.clientY - initialMousePos.y;
            // 이동한 y축 거리 (현재 있는 y좌표 - 시작지점 y좌표)
            console.log(`x : ${offset.x}, y : ${offset.y}`);

            // 실제 박스 이동 
            $box.style.left = offset.x + 'px';
            $box.style.top = offset.y + 'px';
            // style에 left와 top을 바꿔주면 box가 이동함
        }
        // 초기 좌표를 설정하고 move함수를 불러오는 함수 
        function init(event){
            initialMousePos.x = event.clientX - offset.x;
            initialMousePos.y = event.clientY - offset.y;
            // 시작 지점 좌표 
            // 객체에 값을 넣어줌 
            // 이동 거리를 빼줘야 초기화가 안되고 사용자가 mouseup했을 때의 위치가 그대로 설정됨

            console.log('드래그 시작 지점 x : ' + initialMousePos.x);
            console.log('드래그 시작 지점 y : ' + initialMousePos.y);

            // 마우스 이동이 시작된다면 따로 선언한 move함수 불러옴 
            document.addEventListener('mousemove', move);
        }
        
        // mouse down : 마우스 버튼을 눌렀을 때 이벤트가 발생하면 드래그 시작지점의 마우스 포인터 좌표를 저장 
        // $box.addEventListener('mousedown', function(event) {
        //     initialMousePos.x = event.clientX;
        //     initialMousePos.y = event.clientY;
        //     // 시작 지점 좌표 

        //     console.log('드래그 시작 지점 x : ' + initialMousePos.x);
        //     console.log('드래그 시작 지점 y : ' + initialMousePos.y);

        //     // 마우스 이동이 시작된다면 따로 선언한 move함수 불러옴 
        //     document.addEventListener('mousemove', move);
        // });

        
        $box.addEventListener('mousedown', init);
        // $box에 mousedown이라는 event를 발생시키면 init 함수 실행 
        // init함수가 실행되면 시작 좌표를 지정하고 move함수도 실행 
        // move함수는 이동 좌표를 계산하고 실제 이동도 실행
    

        // mouseup 이벤트가 발생하면 mousemove 이벤트 삭제하여 이동을 멈추게 하는 함수
        function remove () {
            document.removeEventListener('mousemove', move);
        }
        // moudrtmove 이벤트 삭제 

        document.addEventListener('mouseup', remove);
        // doucument에서 mouseup이 발생했을때 이벤트를 삭제 

        

    </script>
</body>

</html>

Keyboard Event

  • Keyboard Event

    • 키보드를 통해 이벤트가 발생

    • 마우스가 아닌 다른 장치도 페이지에 이벤트를 발생시킬 수 있음

    • event객체의 property들을 이용해서 수행 이벤트 처리 가능

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <p class="msg"></p>

    <script>
        const $input = document.querySelector('input');
        const $msg = document.querySelector('.msg');

        function up(event) {
            // console.log(event.key);
            // event가 발생했을 때의 key 값이 무엇인지
            if (event.key === 'Enter') {
                // enter 키를 땔 때 
                $msg.textContent = event.target.value;
                // event의 값을 $msg에 값을 넣어줌 

                event.target.value = '';
                // 새로운 내용을 작성하기 위해 값을 비워줌
            } else if (event.key === 'Escape') {
                // esc 눌렀을 때 지워줌
                $msg.textContent = '';

            }

        }
        $input.addEventListener('keyup', up);
        // keyboard를 누르고 땔 때 event발생
    </script>
</body>

</html>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
이전 포스트

JavaScript Attribute Node

다음 포스트

JavaScript Event Propagation

0개의 댓글