Web Event를 javscript로 제어하기

정말 다양한 이벤트들이 존재한다. 그리고 이런 값들은 해당 elements의 이벤트 오브젝트 프로퍼티 값을 변경할 것이다.

 

1. addEventListener

EventTarget.addEventListener("EventType", Function);

EventType에는 이벤트가 정의된다. ex) click, keydown, mouseover, drag ...

이벤트 종류 참고 : https://developer.mozilla.org/ko/docs/Web/Events

Function은 해당 이벤트가 발생했을 때 실행될 함수의 이름이 들어간다.

 

2. onblabla property

EventTarget.onclick = Function1;
EventTarget.onmouseover = Function2;

해당 element의 property로 직접 접근해서 Function을 지정해주는 방법도 있다.

단 이의 경우 EventRemove가 어렵다는 것 같아 addEventListener를 추천한다고 한다.

 

** 어떤 요소의 값에 자주 접근하는 것은 좋지 않다. 변수에 해당 요소를 저장하고 최종적으로 변경해주는 방식이 좋다