EventHandler 추가

김민재·2021년 6월 17일

Gotcha JavaScript!

목록 보기

30/45

브라우저에서 발생하는 Event 종류

form event : HTML 문서의 form element에 변화가 생기거나 submit버튼을 누르는 경우 등의 상황에서 발생하는 이벤트.
window event : 패이지가 모두 로드되었을 때 발생하는 onload event 등이 있다.
mouse event : 사용자가 마우스를 조작했을 때 발생하는 이벤트.
key event : 사용자가 키보드를 조작했을 때 발생하는 이벤트.

Event

-click : mouse event로 HTML element를 마우스로 클릭한 경우 발생한다.
-change : form event로 form 엘리먼트의 내용이 변경된 경우 발생한다.
-submit : form 태그의 submit 이벤트로 EventHandler에서 return false 시 브라우저 자체 기능 (페이지 이동) 비활성화 시킨다.
-keydown : key event로 key가 눌린 경우 발생한하는 이벤트이다.
EventHandler에서 return false시 키 입력을 비활성화 시킨다.
keydown event -> keypress event -> keyup event 순으로 이벤트가 발생
keypress event 발생시에 키가 입력되고 keydown event에서 return false를 한 경우 keypress event가 이어서 발생하지 않는다.

이벤트 핸들러 추가하는 방법들

1>HTML Tag의 속성으로 Event Handler 추가

Tag 의 속성에 event handler 코드를 추가한다.
onEvent 속성 사용 ( onclick, onchange, onkeydown, ... )
 <h1 onclick="console.log('clicked');">..</h1>
 <input type="text" onchange="console.log('changed');" onkeydown="console.log('typed');">
참고*>이벤트가 발생하고 해당 핸들러가 호출되는 과정을 '파이어'되거나 '트리어' 된다고 표현한다.

2> JS에서 EventHandler 설정

property에 직접 Handler설정
-Element의 "on"+"이벤트"의 속성에 메소드를 직접 지정한다.

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form method="GET" action="b.html" id="form1">
    이름: <input type="text" name="id"><br>
    메세지: <input type="text" name="msg" onkeydown="return false;">
    <input type="submit">
  </form>
  <script>
    var t = document.getElementById("form1")
    t.onsubmit = function a() {
      console.log("from property");
      return false;
    }
  </script>
</body>
</html>

3> addEventListner 메소드 사용

element의 addEventListener(이벤트, 함수) 메소드를 호출해, eventHandler 등록한다.
-여러개의 이벤트 핸들러를 등록할 수 있다.

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form method="GET" action="b.html" id="form1">
    이름: <input type="text" name="id"><br>
    메세지: <input type="text" name="msg" onkeydown="return false;"><br>
    <input type="submit">
  </form>
  <script>
    function b() {
      console.log("from addEventListener");
      return false;
    }
    function c() {
      console.log("from addEventListener-2");
      return false;
    }
    t.addEventListener("submit", b);
    t.addEventListener("submit", c);
  </script>
</body>
</html>