[browser event] 자주 이용하는 DOM 이벤트

 

 

마우스 이벤트:

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

폼 요소 이벤트:

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

키보드 이벤트:

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

문서 이벤트:

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

CSS 이벤트:

• transitionend – CSS 애니메이션이 종료되었을 때 발생

 

 

이벤트를 다룰 때는 functionExample() 로 할당하면 동작하지 않음

// 올바른 방법
button.onclick = sayThanks;

// 틀린 방법
button.onclick = sayThanks();

 

또한 setAttribute 로 할당하면 안됨.

 

 

 

addEventListener

HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식을 사용하면 하나의 이벤트에 복수의 핸들러를 할당할수 없었음.

이를 해결하기 위해 addEventListener, removeEventListenr 를 이용한다

 

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

options아래 프로퍼티를 갖는 객체

• once: true이면 이벤트가 트리거 될 때 리스너가 자동으로 삭제
• capture: 어느 단계에서 이벤트를 다뤄야 하는지를 알려주는 프로퍼티로, 관련 내용은 버블링과 캡처링 과 연관, 호환성 유지를 위해 options를 객체가 아닌 false/true로 할당하는 것도 가능한데, 이는 {capture: false/true}는 와 동일함.
• passive: true이면 리스너에서 지정한 함수가 preventDefault()를 호출하지 않는다.

removeEventListener

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

핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해야함

틀린 방법
elem.addEventListener( "click" , () => alert('감사합니다!'));
// ....
elem.removeEventListener( "click", () => alert('감사합니다!'));



맞는 방법
function handler() {
  alert( '감사합니다!' );
}

input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

 

 

 

addEventLintener 를 써야만하는 이벤트 : DOMContentLoaded

 

 

 

 

 

이벤트 객체란

이벤트가 발생하면 브라우저는 *이벤트 객체(event object)*라는 것을 만들게 된다.

여기에 이벤트에 관한 상세한 정보를 넣은 다음, 핸들러에 인수 형태로 전달한다.

 

event.type

이벤트 타입.

event.currentTarget

이벤트를 처리하는 요소. 화살표 함수를 사용해 핸들러를 만들거나 다른 곳에 바인딩하지 않은 경우엔 this가 가리키는 값과 같음, 화살표 함수를 사용했거나 함수를 다른 곳에 바인딩한 경우엔 event.currentTarget를 사용해 이벤트가 처리되는 요소 정보를 얻을 수 있음

event.clientX / event.clientY

포인터 관련 이벤트에서, 커서의 상대 좌표(모니터 기준 좌표가 아닌, 브라우저 화면 기준 좌표)