DAY 23

브라우저 이벤트

EVENT: 무엇인가 일어났다는 신호.

모든 dom 노드들이 event를 만들어내고 dom에만 한정되는 것은 아니다.

event의 종류에는 여러가지가 있다.

마우스 클릭 이벤트

• click - 마우스 왼쪽 버튼 클릭 할 때 발생
• contextmenu - 마우스 오른쪽 버튼을 클릭할때 발생
• mouseover, mouseout - 마우스를 요소 위로 움직이거나 밖으로 움직일 때 발생
• mouseodwn, mouse up - 요소 위에서 마우스 왼쪽 버튼을 누르거나 뗄 때 발생
• mousemove - 마우스를 움질일 때 발생

폼 요소 이벤트

• submit - 사용자가 폼 을 제출할 때 발생
• focus - 사용자가 인풋에 포커스 할 때 발생

키보드 이벤트

• keydown, keyup - 키보드 버튼을 누르거나 뗄 때 발생

문서 이벤트

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

CSS 이벤트

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

Event Handler

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 handler를 할당해야한다.

HTML 속성

HTML 안의 on<event> 속성에 핸들러를 할당할 수 있다.
html 속성은 대,소문자를 구분하지 않는다. ONCLICK onclick 다 동일하게 작용하지만 속성값은 소문자로 작성하는 것이 일반적이다.

DOM 프로퍼티

DOM 프로퍼티 on<event>을 사용해도 핸들러를 할당할 수 있습니다.

handler를 제고하고싶을땐 null을 할당하면 된다
ex) elem.onclick = null

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

this로 요소에 접근하기

핸들러 내부의 this 값은 핸들러가 할당 된 요소이다.

이미 존재하는 함수를 직접 핸들러에 할당시

elem.onclick = hello(); → 괄호를 덧붙이는 것은 함수를 호출하겠다는 의미, 함수 호출의 결과(reult) 값이 할당된다.

elem.onclick = hello;

하지만, HTML의 속성값에는 괄호가 있어야한다.

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

브라우저는 속성값을 읽고, 속성값을 함수본문으로 하는 핸들러 함수를 만들기 때문에 차이가 발생한다.

DOM property는 대 소문자를 구분한다.

elem.onclick

elem.ONCLICK

setattribute

하나의 이벤트에 복수의 핸들러를 할당할 수 없다는게 근본적인 문제!

프로퍼티가 덮어씌워진다.

addEeventListener, removeEventlistener 가 그 문제를 해결해줌. 핸들러를 여러개 할당 할 수 있다.

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

event 이벤트의 이름(예 "click")

handler 핸들러 함수

options 프로퍼티를 갖는 객체

handler 삭제는 removeEventListener로 한다.

삭제는 동일한 함수만 사용할 수 있다. 삭제하고싶으면 할당시 사용한 함수를 그대로 작성해야한다.

DOMContentLoaded 는 무조건 addEventListener를 써야한다.

document.onDOMContentLoaded = funtion(){
alert("DOM 이 열리지 않습니다.");
});

document.addEventListener("DOMContentLoaded",funtion(){
alert("DOM이 열립니다.");
});

이벤트 객체

click 이벤트가 발생했다면 마우스 포인터가 어디에 있는지, keydown 이벤트가 발생했다면, 어떤 키가 눌렸는지에 대한 상세한 정보가 필요하다.

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

event.type

event.currentTarget

event.clientX / eventclintY 좌표 - 브라우저 화면 기준 좌표