[JavaScript] Event Handler 사용하기

Event Handler는 HTML Tag에 Event를 주는것과,
JavaScript에서 Event Handler를 설정하는것으로
크게 두 분류로 나뉘어 져 있습니다.
HTML Tag에 Event를 주는 것은 이전에 onClick Event를 사용하며, 공부를 했으니
이론적인것만 간단히 짚고 JS에서 Event Handler를 설정하는걸 알아보겠습니다.

일단 웹 브라우저에서 발생하는 Event종류는 4가지로 나뉩니다.
form Event, window Event, mouse Event, key Event로 
이루어져 있는데 말 그대로
form Event는 form 내부에
어떠한 변화가 일어났을경우(submit 버튼을 누르는경우)이고,
window Event는 웹 페이지가 로드가 완료되며 발생하는 이벤트,
mouse Event는 마우스를 조작할 때 발생하는 이벤트,
key Event는 키보드를 조작할 때 발생하는 이벤트 입니다.

이벤트의 종류는 굉장히 많고, 그에 대해선 이 포스팅을 참고하시면 되겠습니다.

 

https://hyun-jun5.tistory.com/26

[JavaScript] script 태그, event 주기

 

위의 코드는 get 메소드를 이용해 
text 타입에 입력된 정보를 2.html로 넘기는
간단한 코드입니다.
하지만 저기 코드에 onsubmit 이벤트를 추가하고, 뒤에

2.html로 넘어가는 값을 false로,return false를 적어 줌으로 인해, 값이 리턴 되지않습니다.
즉 2.html로 넘어가지 않고, console log에 from Tag가 적히는지,
아래 사진에서 확인해 보겠습니다.

submit 버튼을 누를 경우에 아래 console log에 from Tag가 입력이 됩니다.
옆에 숫자는 button을 클릭한 수입니다.

그렇다면, property에 직접 Handler를 설정할때는?
Element의 이벤트(on + event) 속성에 메소드를 직접 지정합니다.

t에 document.getElementById를 저장합니다.
그리고 함수 a를 onsubmit속성을 이용하여 getElementById 메소드를
직접 지정합니다.
그리고 밑의 return false는 왜 적는지 말씀드렸죠??
아래 실행결과를 보겠습니다.

from Tag가 아니라 property가 나오는게 확인되시나요?
form안에 소스들이 있더라도, 밑에서 id="form1"에
재 정의를 했기때문에 덮어 씌여집니다.

그럼 element의 addEventListener 메소드를 호출하여,
eventHandler를 등록 해보겠습니다.

 

함수 b를 만든후, console로그를 작성합니다.
이후 아래에 addEventListener를 사용합니다.
이때, addEventListener(이벤트, 함수); 순으로 작성을 하며,
add하는것이기 때문에 여러개 작성이 가능합니다.
반면 add가 가능하면, remove도 가능하겠죠??
아래는 실행 화면입니다.

From Tag에 property가 덧씌워지고,
add된 EventListener의 결과화면입니다.

이젠 add된걸 한번 지워보겠습니다.

함수 c를 생성하고, addEventListener 메소드를 이용해
event를 등록하였습니다.
이후 아래에 함수 b를 삭제 해보겠습니다.
그럼 기존에 나오던 addEventListener는 나오지않겠죠?

실행 화면입니다.
기존에 출력되던 addEventListener가 출력되지않고
addEventListener2가 출력된것을 확인할 수 있습니다.