[Javascript] 브라우저 이벤트 소개

유용한 DOM 이벤트

✔️ 마우스 이벤트

• click : 마우스 왼쪽 버튼, 터치스크린에서는 탭했을 때 발생
• contextmenu : 요소 위에서 마우스 오른쪽 버튼 눌렀을 때 발생
• mouseover / mouseout : 마우스 커서가 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때
• mousedown / mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 떄 / 뗄 때 발생
• mousemove : 마우스를 움직일 때 발생

✔️ 폼 요소 이벤트

• submit : 사용자가 <form>을 제출했을 때 발생
• focus : 사용자가 <input>과 같은 요소에 포커스 했을 때 발생

✔️ 키보드 이벤트

• keydown / keyup : 사용자가 키보드 버튼을 누르거나 뗄 때 발생

✔️ 문서 이벤트

• DOMContentLoaded : HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생

✔️ CSS 이벤트

• transitioned : CSS 애니메이션이 종료되었을 때 발생
  
  

이벤트 핸들러

✔️ 이벤트 핸들러를 할당하는 방법은 3가지가 있음.

1. HTML 속성에 할당
2. elem.onclick
3. addEventListener

 

HTML 속성에 할당

<input value="클릭해주세요" onclick="alert('클릭')" type="button">

 

DOM 프로퍼티

<input id="elem" type="button" value="클릭해 주세요">

<script>
    elem.onclick = function(){
    	alert('감사합니다');
    };
</script>

 

addEventListener

element.addEventListener(event, handler, [options]);

<input id="elem" type="button" value="클릭해 주세요."/>

<script>
  function handler1() {
    alert('감사합니다!');
  };

  function handler2() {
    alert('다시 한번 감사합니다!');
  }

  elem.onclick = () => alert("안녕하세요.");
  elem.addEventListener("click", handler1); // 감사합니다!
  elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script>

 

이벤트 객체

✔️ 이벤트가 발생하면 브라우저는 이벤트 객체라는 것을 만든다.

✔️ 이벤트 객체에서 지원하는 프로퍼티로 다양한 조작을 할 수 있다.

• event.type : 이벤트 타입 ex) click
• event.currentTarget : 이벤트를 처리하는 요소
• event.clientX / event.clientY : 커서의 상대 좌표(브라우저 화면 기준 좌표)

 

 

Reference

• https://ko.javascript.info/introduction-browser-events