[생활코딩][웹브라우저JS] - 이벤트 타입(form, 문서로드, 마우스 관련 이벤트)

티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS] - 이벤트 타입(form, 문서로드, 마우스 관련 이벤트)

blueprint-12 2022. 2. 15. 20:15

이벤트 타입이란 이벤트의 종류라고 할 수 있다.

웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 주요 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는 지 알아보자.

폼(form)에 관련된 이벤트 타입

▶submit 이벤트

: 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다.

<body>
    <form id="target" action="result.html">
      <label for="name">name </label><input id="name" type="name" />
      <input type="submit" />
    </form>
    <script>
      const t = document.getElementById("target");
      //submit이벤트가 발생할 때 익명함수가 호출
      //form태그에 기술된 action프로퍼티로 전송하는 기본동작을 preventDafault()로 방지한다.
      t.addEventListener("submit", function (event) {
        if (document.getElementById("name").value.length === 0) {
          alert("name  필드의 값이 누락됐습니다.");
          event.preventDefault();
        }
      });
    </script>
  </body>

▶change 이벤트

input(text,radio,checkbox),textarea,select 태그에 적용된다.

//입력창에 텍스트를 입력했다가 다시 지워서 원상복귀하면 change이벤트가 작동하지 않는다.

<body>
<!--change이벤트-->
    <p id="result"></p>
    <input id="change_target" type="name" />
    <script>
 	const ct = document.getElementById("change_target");
      ct.addEventListener("change", function (event) {
        document.getElementById("result").innerHTML = event.target.value;
      });
  	</script>
 </body>

▶blur, focus 이벤트

focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트이다.

-> 다음 태그를 제외한 모든 태그에서 발생한다. <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> //제외되는 태그들

<body>
<!--focus , blur 이벤트-->
    <div>
      this is focus and blue Event <br />
      <input id="focus_target" type="name" />
    </div>

<script>
//alert를 사용하면 무한루프에 빠지니 console.log를 사용하는 것이 좋다.
      const ft = document.getElementById("focus_target");
      ft.addEventListener("focus", function (event) {
        console.log("this element has been focused.");
      });
      ft.addEventListener("blur", function (event) {
        console.log("this element has been blured.");
      });
   </script>   
      </body>

여기까지 폼 관련 주요 이벤트를 알아봤습니다.😊

문서로드 이벤트( load, DomContentLoaded 이벤트)

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다.

이것을 알려주는 이벤트가 load, DOMContentLoaded 이다.

문서의 모든 코드가 로드되기 전에 자바스크립트가 실행되면(head태그에 script태그가 위치했을 때) 코드의 실행결과는 null이 뜬다.

->이를 해결하기 위한 방법은 크게 2가지가 있다.

스크립트를 문서 끝에 위치시키는 것(script태그를 body태그의 맨 끝 쪽에 위치)
load 이벤트를 이용하는 것 (+ DOMContentLoaded 이벤트)

하지만, load이벤트는 문서 내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것은 애플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
그 대안으로 제시되는 것이 DOMContentLoaded이벤트이다. DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다. ->(문서 내의 모든 리소스가 아닌)모든 HTML 태그가 화면에 렌더링이 끝나면 그때 해당 이벤트의 JS코드가 실행된다.
addEventListener을 사용할 때 브라우저 화면에 대해 이벤트 핸들러를 등록해야하므로 window.addEventListener로 해줘야 한다.

<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>문서로딩 이벤트</title>
    <script>
      window.addEventListener("load", function () {
        console.log("load event");
      });
      window.addEventListener("DOMContentLoaded", function () {
        console.log("DOMContentLoaded event");
        const t = document.getElementById("target");
        console.log(t);
      });
      //output: DOMContentLoaded event
      // <p id="target">Hello</p>
      // load event
      /*순서를 보면 DOMContentLoaded event에 해당하는 결과값이 먼저 콘솔에 출력되고 
      그 뒤에 load 이벤트가 출력되는 것을 알 수 있다.*/
    </script>
  </head>
  <body>
    <!--웹 페이지의 모든 요소에 대한 처리가 끝나는 것을 알려주느 이벤트
    1. load 
    2. DOMContentLoaded 
    문서가 오류없이 제대로 작동하려면 문서 내의 콘텐츠가 먼저 로드되고 그 뒤에 JS가 실행돼야 한다.
    역으로 실행될 시(JS -> 문서) 값을 제대로 읽어오지 못하는 오류가 발생한다. 
    이때 해결 방안으로 사용하는 것이 위의 2가지 이벤트이다. -->
    <p id="target">Hello</p>
  </body>
</html>

유의) DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원 -> 라이브러리를 사용한다면 알아서 맞춰서 작동할 것이라 크게 신경쓰지 않아도 된다.

마우스 관련 이벤트

웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.

-> PC기반 이벤트라서 차후에는 어떤 디바이스를 사용할 지에 따라 달라질 것

▶이벤트 타입

click
클릭했을 때 발생하는 이벤트.
dblclick
더블클릭을 했을 때 발생하는 이벤트
mousedown
마우스를 누를 때 발생
mouseup
마우스버튼을 땔 때 발생
mousemove
마우스를 움직일 때
mouseover
마우스가 엘리먼트에 진입할 때 발생
mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생
contextmenu
컨텍스트 메뉴가 실행될 때 발생 //우클릭하면 메뉴 뜨는 거

▶키보드 조합

마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.

event.shiftKey
event.altKey
event.ctrlKey

▶마우스 포인터 위치

마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clienY를 사용한다.

▶예제

마우스 이벤트와 관련된 기능을 종합적으로 보여주는 예시

<html>
    <head>
        <style>
            body{
                background-color: black;
                color:white;
            }
            #target{
                width:200px;
                height:200px;
                background-color: green;
                margin:10px;
            }
            table{
                border-collapse: collapse;
                margin:10px;
                float: left;
                width:200px;
            }
            td, th{
                padding:10px;
                border:1px solid gray;
            }
        </style>
    </head>
    <body>
        <div id="target">
 
        </div>
        <table>
            <tr>
                <th>event type</th>
                <th>info</th>
            </tr>
            <tr>
                <td>click</td>
                <td id="elmclick"></td>
            </tr> 
            <tr>
                <td>dblclick</td>
                <td id="elmdblclick"></td>
            </tr>
            <tr>
                <td>mousedown</td>
                <td id="elmmousedown"></td>
            </tr>         
            <tr>
                <td>mouseup</td>
                <td id="elmmouseup"></td>
            </tr>         
            <tr>
                <td>mousemove</td>
                <td id="elmmousemove"></td>
            </tr>         
            <tr>
                <td>mouseover</td>
                <td id="elmmouseover"></td>
            </tr>         
            <tr>
                <td>mouseout</td>
                <td id="elmmouseout"></td>
            </tr>
            <tr>
                <td>contextmenu</td>
                <td id="elmcontextmenu"></td>
            </tr>         
        </table>
        <table>
            <tr>
                <th>key</th>
                <th>info</th>
            </tr>
            <tr>
                <td>event.altKey</td>
                <td id="elmaltkey"></td>
            </tr>
            <tr>
                <td>event.ctrlKey</td>
                <td id="elmctrlkey"></td>
            </tr>
            <tr>
                <td>event.shiftKey</td>
                <td id="elmshiftKey"></td>
            </tr>
        </table>
        <table>
            <tr>
                <th>position</th>
                <th>info</th>
            </tr>
            <tr>
                <td>event.clientX</td>
                <td id="elemclientx"></td>
            </tr>
            <tr>
                <td>event.clientY</td>
                <td id="elemclienty"></td>
            </tr>
        </table>
        <script>
        var t = document.getElementById('target');
        function handler(event){
            var info = document.getElementById('elm'+event.type);
            var time = new Date();
            var timestr = time.getMilliseconds();
            info.innerHTML = (timestr);
            if(event.altKey){
                document.getElementById('elmaltkey').innerHTML = timestr;
            }
            if(event.ctrlKey){
                document.getElementById('elmctrlkey').innerHTML = timestr;
            }
            if(event.shiftKey){
                document.getElementById('elmshiftKey').innerHTML = timestr;
            }
            document.getElementById('elemclientx').innerHTML = event.clientX;
            document.getElementById('elemclienty').innerHTML = event.clientY;
        }
        t.addEventListener('click', handler);
        t.addEventListener('dblclick', handler);
        t.addEventListener('mousedown', handler);
        t.addEventListener('mouseup', handler);
        t.addEventListener('mousemove', handler);
        t.addEventListener('mouseover', handler);
        t.addEventListener('mouseout', handler);
        t.addEventListener('contextmenu', handler);
        </script>
    </body>
</html>

ref: https://opentutorials.org/course/1375/6766

마우스 - 생활코딩

이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트 mousedown 마우스를 누를 때 발생 m

opentutorials.org

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

[생활코딩][웹브라우저JS] - JSON(JSON과 Ajax) (0)	2022.02.22
[생활코딩][웹브라우저JS] - 네트워크 통신(Ajax) (0)	2022.02.20
[생활코딩][웹브라우저JS] - 이벤트 기본동작 취소 (0)	2022.02.15
[생활코딩][웹브라우저JS] - 이벤트 전파(버블링과 캡처링, 이벤트 위임) (0)	2022.02.14
[생활코딩][웹브라우저JS] - Event(이벤트) (0)	2022.02.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

공부 기록일지📚

티스토리 뷰