이벤트 객체

DOM의 모든 이벤트 정보는 event 객체에 저장됨

<div id="test"></div>

<script>
	var el = document.getElementById("test");
    el.addEventListener('click', function(e){
      console.log(e.type);    //  clcik
    }
</script>

e.currentTarget은 현재선택된 위치(이벤트 등록된 위치), e.target은 실제 클릭된 노드(어디서 클릭이 발생했는지)

<ul id="menu">
  <li><button id="file">File</button></li>
  <li><button id="edit">Edit</button></li>
  <li><button id="view">View</button></li>
</ul>

<script>
  document.getElementById("menu")
    .addEventListener("click", 
      function(e){console.log("menu", e.target)});  // <button id="file">File</button>
      
  document.getElementById("menu")
    .addEventListener("click", 
      function(e){console.log("menu", e.currentTarget)});  // <ul id="menu"><li>...</li>...</ul>
</script>

/* file을 클릭하면, target은 실제위치 리턴, currentTarget은 이벤트리스너 위치(this) 리턴 */

이벤트 위임: 부모 노드에 이벤트를 걸어서 관리: 각각마다 이벤트를 놓을 필요가 없다.

<ul id="menu">
  <li><button id="create">create</button></li>
  <li><button id="view">view</button></li>
  <li><button id="edit">edit</button></li>
</ul>

<script>
  document.getElementById("menu").addEventListener('click', function(e){
	switch(e.target.id){
    
  	case "create":
    	console.log("you clicked the create");
      break;
    case "view":
    	console.log("you clicked the view");
      break;
    case "edit":
    	console.log("you clicked the edit");
      break;
    default:
      console.log("nothing");
  }
});
</script>

이벤트 발생 타입에 따른 위임

<button id="bt">
  Click
</button>

<script>
  var el = document.getElementById("bt");
  var handler = function(e){
    switch(e.type){
      case "click":
        console.log("click");
        break;
      case "mouseover":
        console.log("mouseover");
        break;
      case "mouseout":
        console.log("mouseout");
        break;
      default:
    }
  }
  el.onclick = handler;
  el.onmouseover = handler;
  el.onmouseout = handler;
</script>

jQuery에서의 이벤트 위임

$(“#menu”).on(“click”, “li button”, function(){
  if(this.id === “file”) { … }
});

$(“#menu”).on(“click”, “#file”, function(){ // 파일 메뉴 동작 }
$(“#menu”).on(“click”, “#edit”, function(){ // 편집 메뉴 동작 }
$(“#menu”).on(“click”, “#view”, function(){ // 보기 메뉴 동작 }