event

이벤트 처리방식

HTML 태그에 직접 이벤트 핸들러 명시

<script>
function doProcess() {
}
</script>
<input type="button" onclick="doProcess()"/>

자바스크립 코드를 이용하여 이벤트 핸들러 명시

<script>
function doProcess() {
}
var btn1 = document.getElementById("btn1");
btn.onclick = doProcess;

</script>
<input type="button" id="btn1"/>

이벤트 리스너 방식 처리

<script>
function doProcess() { }
function doClickOnBtn1() { }

var btn1 = document.getElementById("btn1");

btn1.addEventListener("click", doProcess, false);
btn1.addEventListener("click", doClickOnBtn1,false);

이벤트 흐름

이벤트흐름 3단계 : 캡쳐 -> 대상 -> 버블링

<div id="grand" style="border:1px solid #333">grand의 상단
    <div id="parent" style="border:1px solid red">parent의 상단
        <div id="child" style="border:1px solid blue">child
        </div> 
         parent의 하단
    </div>
     grand의 하단
</div>
<script>
window.onload = function() {
var grand = document.getElementById("grand");
var parent = document.getElementById("parent");
var child = document.getElementById("child");

ajax.Event.addListener(grand, "mousedown", grandHandler, false);
ajax.Event.addListener(parent, "mousedown", parentHandlerCapture, true);
ajax.Event.addListener(parent, "mousedown", parentHandler, false);
ajax.Event.addListener(child, "mousedown", childHandler, false);
}
</script>

이벤트 전파(propagation) / 중지

event.stopPropagation();

기본 이벤트 전파 중지

event.preventDefault();

이벤트 개요

event 종류
event 객체
- 이벤트 발생시킨 대상이 누구인지, 또는 이벤트의 발생 위치가 어떻게 되는지 정보를 구하기 위해서는 이벤트 객체를 먼저 구해야한다.
- KeyboardEvent(keyCode), MouseEvent(clientX, clientY)

function doClickOnBtn1(e) {
   var e = window.event || e;
   var target = e.target;       //이벤트타캣
   log("이벤트 대상: " + target.nodeName);
   log("대상의 ID: " + target.id);

   log("이벤트 타입: " + e.event.type);
}

event 타겟
리스너(핸들러)
그룹이벤트(이벤트위임)
이벤트핸들러에서 this
- apply, call, bind : 함수를 직접 호출하지 않고 apply(), call() 함수를 사용해서 호출하면 첫 번째 인자가 함수 내에서 this 객체로 매핑

yumi

이벤트 처리방식

이벤트 흐름

이벤트 개요