이벤트 처리 addEventListener()

<input id="addPostit" type="button" value="New Postit"> 라면.

window.onload = function(){

var btn = document.getElementById("addPostit");

btn.addEventListener("click", btnClick, true);

};

function btnClick() {

alert("zzz");

}

- 버튼 클릭 이벤트 발생시, alert 처리.

- onload 는 페이지의 모든 리소스(이미지..)가 로드될 때까지 기다렸다가 나중에 실행됨.

# addEventListener 이벤트 종류 

 

대상.addEventListener("종류",실행하려는 함수,true and false)

 

이벤트 종류.

마우스와 키보드 이벤트가 대부분임

 

마우스이벤트

click   마우스 버튼 클릭시 발생

dblclick   마우스 더블클릭시 발생

mousedown  마우스 버튼을 눌렀을 때 발생

mouseup   마우스 버튼을 눌렀다 땠을 때 발생

mouseover   마우스 커서를 올려 놓았을 때 발생

mouseout   마우스 커서를 올려놓았다가 밖으로 나갈 때 발생

mousemove  마우스 커서를 움직일 때 발생

 

키보드 이벤트

keydown  키보드가 눌려있을 때 발생

keyup  미보드가 눌려있다가 떼는 순간 발생

keypress  키보드가 눌리는 순간 발생

 

 

html이벤트

load 페이지를 전부 눌려있을 때 발생

unload 페이지로 부터 빠져 나갈 때 발생

abort 페이지를 읽다가 사용자의 중지 요청에 의해 중단되는 경우 발생

error 페이지를 읽다가 오류에 의해 중단되는 경우 발생

select 텍스트박스에서 사용자가 특정 문자나 문자열을 선택했을 때 발생

change 텍스트박스의 값이 변경되는 경우 발생

submit FORM에서의 submit 버튼이 클릭되는 경우 발생

reset FORM에서의 reset 버튼이 클릭되는 경우 발생

resize 윈도우(window)나 프레임(frame) 크기가 변경되는 경우 발생

scroll 스크롤바가 스크롤되는 경우 발생

focus 특정 객체(element)에 포커스가 주어지는 경우 발생

blur 특정 객체(element)에 포커스가 있다가 사라지는 경우 발생

[출처] addEventListener|작성자 댕이