[Javascript] Html 요소(element)의 이벤트(Event)를 추가하는 방법


Study/Javascript, Jquery, CSS  2020. 3. 24. 16:21

안녕하세요. 명월입니다.


이 글은 Javascript에서 Html 요소(element)의 이벤트(Event)를 추가하는 방법에 대한 글입니다.


먼저 프로그램에서 이벤트라는 것은 컨트롤이나 요소가 특정 동작이나 액션을 감지하여 함수를 호출하는 프로시져를 말합니다.

쉽게 이야기하면, 사용자가 마우스로 버튼을 클릭하면, 버튼에 대한 클릭 이벤트가 발생하여 지정된 함수를 호출하는 것입니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!-- 버튼 요소 -->
  <!-- onclick 이벤트로 클릭하면 test()함수가 호출! -->
  <button onclick="test()">click</button><br />
  <!-- 출력하는 textarea 요소 -->
  <textarea id="console" style="width:200px;height:100px;"></textarea>
  <script>
    // 위 버튼을 클릭하면
    function test() {
      // click이라는 문구가 console의 textarea에 출력.
      document.getElementById("console").value += "click\r\n";
    }
  </script>
 </body>
</html>

html 요소에서 속성으로 「on + 이벤트 타입」명으로 이벤트를 추가 할 수도 있습니다.

이 방법은 html 인라인 이벤트로 위처럼 함수를 호출하면 호출의 함수 재사용은 가능하지만, 각 요소에서 이벤트를 직접 수정하는 경우나 가독성의 문제(각 요소에서 이벤트가 어떻게 작성되는지 한눈에 알기가 힘들다)때문에 사실 잘 사용하지는 않습니다.


좋은 방법은 script의 태그 안에서 요소를 탐색(selector)해서 이벤트 리스너(addEventListener)를 사용하는 방법이 일괄적인 관리가 가능합니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!-- 버튼 요소 -->
  <button id="test">click</button><br />
  <!-- 출력하는 textarea 요소 -->
  <textarea id="console" style="width:200px;height:100px;"></textarea>
  <script>
    // test id의 요소에 click 이벤트를 연결.
    document.getElementById("test").addEventListener("click", test);
    // 위 버튼을 클릭하면
    function test() {
      // click이라는 문구가 console의 textarea에 출력.
      document.getElementById("console").value += "click\r\n";
    }
  </script>
 </body>
</html>

여기까지는 html 이벤트와 크게 차이가 없어보입니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!-- 여러 버튼을 만들고 -->
  <button class="test">click1</button><br />
  <button class="test">click2</button><br />
  <button class="test">click3</button><br />
  <button class="test">click4</button><br />
  <button class="test">click5</button><br />
  <!-- 출력하는 textarea 요소 -->
  <textarea id="console" style="width:200px;height:100px;"></textarea>
  <script>
    // test 클래스를 가진 요소에 모두 동일한 클릭 이벤트를 연결.
    var eles = document.getElementsByClassName("test");
    for(let i=0; i<eles.length; i++) {
      eles[i].addEventListener("click", test);
    }
    // 위 버튼을 클릭하면
    function test() {
      // click이라는 문구가 console의 textarea에 출력.
      document.getElementById("console").value += "click\r\n";
    }
  </script>
 </body>
</html>

여기까지 event를 연결하는 방법을 설명했습니다. event 타입을 소개하겠습니다.

종류 이벤트 타입 설명
마우스 관련 mouseenter 마우스 포인터가 요소의 테두리 안으로 들어갈 때 발생
mouseover 마우스 포인터가 요소의 위로 이동할 때 발생
mousemove 마우스 포인터가 요소의 테두리 안에서 이동할 때 발생
mousedown 마우스 포인터가 요소의 테두리 안에서 눌렸을 때 발생
mouseup 마우스 포인터가 요소의 테두리 안에서 눌림이 끝날 때 발생
auxclick 요소의 위에서 마우스의 주 버튼이 아닌 버튼이 눌렸을 때 발생
click 요소의 위에서 마우스의 주 버튼이 눌렸을 때 발생
dblclick 요소의 위에서 마우스의 주 버튼이 더블 클릭 되었을 때 발생
contextmenu 요소의 위에서 컨텍스트 메뉴가 열리는 버튼을 눌렀을 때 발생
wheel 요소의 위에서 휠 버튼이 회전되었을 때 발생
mouseleave 마우스의 포인트가 요소를 벗어났을 때 발생
mouseout 마우스의 포인트가 요소를 벗어났을 때(자식 요소로 이동되어도) 발생
select 마우스에 의해 텍스트가 선택되었을 때 발생
키보드 관련 keydown 키보드 키를 눌렸을 때 발생
keypress 키보드의 쉬프트, Fn, CapsLock을 제외한 키가 눌린 상태일 때 발생(연속적으로 실행됨)
keyup 키보드 키 누름이 해제될 때 발생
포커스 관련 focus 요소에 포커스를 받았을 때 발생
blur 요소에 포커스를 잃었을 때 발생
뷰 이벤트 관련 fullscreenchange 전체화면 모드로 변경되었거나 일반 모드로 돌아왔을 때 발생
resize 화면의 사이즈가 변경되었을 떄 발생
scroll 화면의 스크롤의 위치가 바뀌었을 때 발생
드래그 앤 드랍 관련 dragstart 요소의 드래그가 시작될 때 발생
drag 요소가 드래그 중일 때 발생
dragend 요소의 드래그가 종료될 떄 발생
dragenter 드래그된 요소가 유효된 드랍 대상에 들어갈 때 발생
dragover 드래그된 요소가 유효된 드랍 대상 위에서 이동할 때 발생
dragleave 드래그된 요소가 유효된 드랍 대상 위에서 벗어날 때 발생
drop 드래그된 요소가 유효된 드랍 대상 위에 드랍이 되었을 때 발생

참조 - https://developer.mozilla.org/en-US/docs/Web/Events


여기까지 Javascript에서 Html 요소(element)의 이벤트(Event)를 추가하는 방법에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.