Javascript Event
이벤트 : 사용자 입력, 문서나 브라우저의 상태 변화의 발생
ex) click, load, mouseon, keypresss, change, resize, submit...
이벤트 객체 event : 이벤트에 관한 정보를 갖는 객체로 이벤트가 처리되고 나면 소멸
properties
- type : click, keypress, load ... 발생한 이벤트의 종류
- target : 이벤트를 발생시킨 DOM객체
- currentTarget : 현재 이벤트리스너를 실행하고 있는 DOM객체
- defaultPrevented : 이벤트가 발생하면 디폴트로 수행되는 행동이 취소되었는지를 논리값으로 반환
- preventDefault() : 이벤트가 발생하면 디폴트로 수행되는 행동을 취소하는 function property
ex event 발생시 default로 수행하는 행동)
img, submit 버튼 클릭시 submit 후 페이지기반 요
a href 클릭시 link로 페이지기반 요청
checkbox 선택시 선택
이벤트 리스너 : 발생한 이벤트에 따라 대처하는 코드
- HTML 태크 내 작성
<body onload="...code">
<div onclick="......" id="divE">
- DOM 객체의 이벤트 리스너 프로퍼티에 작성
ex)
function move(){...divE객체의 이벤트 리스너에 등록할 함수};
var divE = document.getElementById("divE");
divE.onclick=move;
divE.onmouseover=function(){....익명함수를 이용...code....};
- DOM 객체의 addEventListener 메소드
addEventListener("eventName without 'on' word", eventListenerName, useCapture(bubble=false(default) or capture=true)
ex1)
ex2)
function (){
divE.addEventListener("mouseover",mouseover);
divE.addEventListener("keydown",function(){ ... anonymouse code for keydown ... });
divE.addEventListener("click",function(e) {
console.log(e.target);
});
}
function mouserover(){...}
이벤트의 디폴트 액션 막는 법
1. 이벤트리스너에서 return false;
<a href="www.url.com" onclick="
return confirm("이동?");"
>
2. 이벤트 객체의 preventDefaul() function 호출
<input type="checkbox" onclick="function f(e){
};f(event);">uncheck
EVENT FLOW
capture Flow
window -> document -> html -> body -> ... -> button
bubble Flow
-> button -> ... -> body -> html -> document -> window -> 소멸
이벤트 플로우와 이벤트 리스너
이벤트가 flow를 따라가면서 마주치는 모든 객체의 이벤트 리스너에 동일한 타입의 리스너가 실행된다.
예를들어
button과 body에 click이벤트 리스너가 등록되어있다면
button에 click 이벤트가 발생하면 button만 이벤트리스너가 작동하는 것이 아니라
capture flow를 타고 타겟에 도달해 버튼의 click 이벤트 리스너가 작동하고
bubble flow를 타고 타겟에서 window를 향해 거슬러 올라갈 때 body를 마주치면 body의 click 이벤트 리스너도 작동하게된다.
이는 기본적으로 이벤트 리스너가 등록될때 bubble flow에서 작동되는것을 default로 하고 body에서도 click이벤트가 발생한 것과 같기 때문에 body의 이벤트 리스너도 작동하는것이다.
이벤트 리스너는 동일한 객체의 동일한 타입이라도 bubble과 capture 리스너 모두 작성할 수 있다.
ex) buttonE.addEventListener("click",function bubbleclick(){...}, false); false 는 default로 생략가능
buttonE.addEventListener("click",function captureclick(){...}, true);
만약 button에서 이벤트 발생시 body에서도 이벤트리스너가 발생하는 것을 막고 싶다면
buttonE.addEventListener("click", function bubbleclick(e){... e.stopPropagation();});
buttonE.addEventListener("click", function captureclick(e){... e.stopPropagation();});
>span에서 click이벤트가 발생하면 bubbling으로 h1, div, div, body의 click이벤트도 발생하게 된다.
>이를 처리하기 위해서 event.stopPropagation(); 함수를 사용하면 bubbling되는 것을 막을 수 있다.
마우스 관련 이벤트 : click, dbclick(더블클릭), mousedown(누르는 순간), mouseup(눌렀다 올라가는 순간), mouseover, mouseout, mouseenter(버블 단계 없음), mouseleave(버블 단계 없음), wheel, contextmenu(우클릭시 디폴트로 메뉴출력)
properties
x, y 마우스 좌표 (타겟 객체의 부모 객체내 기준)
screenX, screenY(스크린 기준 마우스좌표)
clientX, clientY(브라우저 윈도우 기준)
offsetX, offsetY(타겟 객체 내 기준)
button (return 0 : unclicked, 1: left clicked, 2 : right clicked, 3 : both clicked, 4 : middle clicked)
wheelDelta (>0 : upside, <0 : downside)
onload 이벤트
웹 페이지 DOM tree가 완성되고 난 후 렌더링 직전 발생하는 이벤트
html 내에서 javascript의 실행 위치는 중요하다.
만약, html의 DOM 객체가 생성되지 않은 시점에서
javascript 태그를 만나 html의 특정 DOM 객체에 접근하는 행위를 한다면
아직 생성되지 않은 DOM 객체에 접근할 수 없어 해당 코드를 실행할 수 없다.
보통은 html body 마지막 부분에 script 태그를 두어 javascript를 작성한다.
body 앞부분에서 javascript를 실행하고 싶다면
window.load 이벤트 리스너에 해당 코드를 function으로 등록하면 된다.
1.
DOM-level 0
- window.onload=f;
- window.onload=d;
f함수는 d함수에 덮인다 하나만 등록할 수 있다.
DOM-level 2
- window.addEventListener("load",f);
- window.addEventListener("load",d);
addEventListener()는 같은 이벤트에 대해 여러개의 리스너를 중복하여 등록하게 해준다.
2.<body onload="f();">
ex)
<script>
window.onload = function(){
document.getElementById('pE').innerHTML='특정 p객체 html 갱신';
document.getElementById('divE').addEventListener("click",click);
document.getElementById('divE').ondbclick=click;
}
</script>
<body>
script태그가 body 태그의 앞에 있어
아직 body객체가 생성되지도 않았는데 script 에서 id가 'pE'인 객체와 'divE'인 객체에 접근하려 한다.
window.load에 익명 함수를 만들어 돔트리가 생성되고 load 이벤트가 발생할 때 실행될 익명함수를 등록한다.
그 익명함수는 body 태그보다 앞서 작성되었지만 돔트리가 생성되 전까진 실행되지 않고
다 끝난 후 실행되는 함수이기 때문에 'pE'객체와 'divE'객체에 접근이 가능한 것이다.
이와 같은 원리는 image에서도 작동한다.
image는 img태그가 있다고 즉시 렌더링 완료 되는 것이 아니라
img 태그를 parsing 할때 렌더링을 시작하고 스레드는 다음 코드를 실행한다.
만약 img 태그 다음라인에 img태그의 속성에 접근하는 코드가 있다면
img태그가 렌더링 되지 않은 상태에서 접근할 수 있어 위험하다.
이러한 문제를 해결하기 위해 img도 load 이벤트 리스너를 이용한다.
onfocus, onblur 이벤트
focus 가 잡힐 때, focus를 잃을 때 발생
onchange 이벤트
radio, checkbox, select 태그의 상태 변화 등 변화가 발생할 때 이벤트 발생
onkeydown, onkeypress, onkeyup 이벤트
모든 키가 눌려질 때, 문자키(+esc, space, enter키)가 눌려질 때, 놓여질때 발생하는 이벤트
onreset
form 태그의 type="reset"인 버튼 클릭시 발생
onsubmit
form 태그의 type="submit"인 버튼 클릭시 발생,
submit 버튼에 onclick 이벤트 리스너 함께 사용하지 말것
false 반환 시 폼을 전송하지 않음