브라우저 이벤트 소개

1.마우스 이벤트

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

2.폼 요소 이벤트

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

3.키보드 이벤트

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

4.문서 이벤트

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

5.CSS 이벤트

• transitionend - CSS 애니메이션이 종료되었을 떄 발생

이벤트 핸들러

이벤트에 반응하려면 발생했을 때 실행되는 핸들러를 할당해야함
핸들러 : 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것

할당방법

1.HTML 속성

HTML 안에 on<event> 속성에 핸들러 할당할 수 있음

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

버튼을 클릭하면 onclick안에 코드가 실행이 됨

• 함수 실행

<script>
 	function countRabbits() {
	for (let i = 0; i <=3 ; i++) {
    	alert(`토끼 ${i}마리`);
    }
}
</script>
<input type = "button" onclick="countRabbits()" value="토끼를 세봅시다!">

2.DOM 프로퍼티

DOM 프로퍼티 on<event>을 사용해 핸들러에 할당

<input id = "elem" type = "button" value ="클릭해 주세요.">
<script>
  elem.onclick = function () {
  	alert('감사합니다.');
  };
</scirpt>

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

이 두개는 똑같이 작동함

<input type = "button" id="button" value="클릭해주세요">
  <script>
  	button.onclick = function() {
	alert('클릭!');
	};
  </script>

!주의
onclick프로퍼티는 하나밖에 없기 때문에, 복수의 이벤트 핸들러를 할당할 수 없음

3.this 요소에 접근

핸들러 내부에 쓰인 this 값은 핸들러가 할당된 요소

<button onclick="alert(this.innerHTML)">클릭해 주세요.</button>

자주하는 실수

<input type="button" id="button" onclick="sayThanks()">

HTML 속성값에는 sayThanks()로 괄호가 있어야함

button.onclick = sayThanks;

브라우저 속성값을 읽고, 속성값을 함수 본문으로 하는 핸들러 함수를 만들기 떄문에 이런 차이

setAttribute로 핸들러 할당x

document.body.setAttribute('onclick', function() {alert(1)});

4. addEventListener

DOM 프로퍼티를 이용한 이벤트 핸들러 할당방식은 하나의 이벤트에 복수의 핸들러를 할당할 수가 없음
그 대안이

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

element.removeEventListener(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>

5. 이벤트 객체

이벤트를 제대로 다룰려면 어떤 일이 일어났는지 상세히 알아야함
이벤트가 발생하면 브라우저는 '이벤트 객체'라는 걸 만듬

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

<script>
  elem.onclick = function(event) {
    // 이벤트 타입과 요소, 클릭 이벤트가 발생한 좌표를 보여줌
    alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    alert("이벤트가 발생한 곳의 좌표는 " + event.clientX + ":" + event.clientY +"입니다.");
  };
</script>

6. 객체 형태의 핸들러와 handleEvent

addEventListener를 사용하면 함수뿐만 아니라 객체를 이벤트 핸들러로 할당할 수 있음

<button id="elem">클릭해 주세요.</button>
<script>
  let obj = {
    handleEvent(event) {
      alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    }
  };

  elem.addEventListener('click', obj);
</script>

addEventListner인수, 객체 형태의 핸들러를 받으면 이벤트 발생 시 obj.handleEvent(event)가 호출