[JavaScript] addEventListener() 이벤트 등록

addEventListener()는 document의 특정요소의 event를 실행할때 사용한다.

<input type="button" id="btn" value="button" />
<script>
    
    var t = document.getElementById('btn'); 
        t.addEventListener('click', clickButton);
    
    function clickButton(){
    	// btn 버튼의 함수 
    }
</script>

대상객체.addEventListener('event 이름', fuction 이름);

 

 

자주 사용하는 event들 

click	마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
mouseover	마우스를 HTML요소 위에 올리면 발생
mouseout	마우스가 HTML요소 밖으로 벗어날 때 발생
mousedown	클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용
mouseup	마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용
mousemove	마우스가 움직일때마다 발생
focus	HTML요소에 포커스가 갔을때 발생
blur	HTML요소가 포커스에서 벗어났을때 발생
keypress	키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생
keydown	키를 누를 때 발생
keyup	키를 눌렀다가 떼는 순간에 발생
load	웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생
resize	브라우저 창의 크기를 조절할때 발생
scroll	스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생
unload	링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생
change	폼 필드의 상태가 변경되었을 때 발생

 

 

 

 

 

 

 

 

 

 

 

참고 : https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/