자바스크립트 event

이벤트 핸들러 등록

참고사이트 : MDN Web Docs 이벤트 입문

1. HTML 태그에 인라인 이벤트 핸들러 등록

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

• html과 javascript 코드 분리해야함. 이 방식은 사용을 자제해야 함
• function(){ doProcess(); } 와 같은 구조임. 함수호출이므로 ( )가 필요함
• react, vue에서는 인라인 이벤트 핸들러 사용해야 함.

2. 자바스크립트에서 이벤트 핸들러 프로퍼티 지정

<input type="button" id="btn1"/>
  
<script>
function doProcess() {  }
var btn1 = document.getElementById("btn1");

btn.onclick = doProcess;          //함수참조: ()를 붙히지 않음
btn.onclick = function(){   }     //익명함수
btn.onclick = () => {  }          //화살표함수
</script>

• 이벤트 핸들러를 하나만 지정할 수 있음

3. 이벤트 리스너 방식 처리

<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 객체로 매핑