주기억장치

Viewport: 브라우저가 화면내에서 보이는 부분. 디바이스에 따른 화면출력이 가능함

Screen: screenX, screenY 모니터 화면 전체를 대상으로 함. (브라우저가 아닌)화면의 상단 모서리 기준

Page: pageX, pageY 전체 페이지를 기준으로 현재커서 위치. 페이지 최상단은 viewport를 벗어나 있을수 있기에 커서가 같은 위치에 있어도 페이지 좌표와 클라이언트 좌표가 다를수 있다.

Client: clientX, clientY 브라우저 뷰포트 기준으로 커서위치 알려줌. 스크롤해서 상단 안보이더라도 클라이언트 좌표는 영향받지않음

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(){ // 보기 메뉴 동작 } 

- innerHTML: 모든 자식 요소와 텍스트 컨텐츠 접근 가능, 보안에 취약함

<p id="userName">User Kim</p>
<script>
  var ele = document.getElementById('useName');  // get a node
  console.log(ele);  // <p id="userName">User Kim</p>

  var ele = document.getElementById('useName').innerHTML;  // get a text in a node
  console.log(ele);  // User Kim
</script>

<!---------------------------------------------------------------------------------->
<p id="userName">Mr.<span>User Kim</span></p>
<script>
  var ele = document.getElementById('useName');  // get a node
  console.log(ele);  // <p id="userName"><span>Mr.</span>User Kim</p>

  var ele = document.getElementById('useName').innerHTML;  // get a text in a node
  console.log(ele);  // <span>Mr.</span>User Kim

  var ele = document.querySelector('#userName span').innerHTML;
  console.log(ele)  // Mr.
</script>

- textContent: 특정요소의 컨텐츠에만 접근

<p id="userName">
  <span>Mr.</span>
  User Kim
</p>
<script>
  var ele = document.getElementById("userName").textContent;
  console.log(ele);  
  // Mr.
  // User Kim
  
  var ele = document.getElementById("userName").innerText;
  console.log(ele);  
  // Mr. User Kim
</script>  

- create element and content

  : createElement, createTextNode, appendChild

<p id="userName">Click</p>
<p id="res"></p>
<script>
  function creatName(){
    var ele = document.createElement("span");
    var cont = document.createTextNode("Mr. User Kim");
    document.getElementById("res").innerHTML = ele.appendChild(cont).textContent;
  }
  var user = document.getElementById("userName");
  user.addEventListener('click', createName, false);

click
Mr. User Kim   // <span>Mr. User Kim</span>

- access to class

  : className

<p id="person" class="family">Home</p>

<script>
  var ele = document.getElementById("person");
  console.log(ele.className)  // family
  
  ele.className += " friend";  // Add class
  console.log(ele.className);  // family friend
  
  console.log(ele);  // <p id="person" class="family friend>clas</p>
</script>

- Attribute

  : hasAttribute(), getAttribute(), setAttribute(), removeAttribute()

<p id="person" class="family">Home</p>
<a href="" target="_blank" id="contact">Click</a>
<script>
  var ele = document.getElementById("person");
  
  /* hasAttribute()  check attribute */
  if(ele.hasAttribute("class")){
    ele.className += " friend";  // Add a class
    
    /* getAttribute() */
    console.log(ele.getAttribute("class"));  // return attribute's value, family friend
  }else{
    console.log("no class");  // display "no class"
  }
  
  /* setAttribute() */
  var con = document.getElementById("contact");
  con.setAttribute("href", "https://www.google.com");  // setAttribute(attribute, value)
  
  /* removeAttribute() */
  var con = document.getElementById("contact");
  con.removeAttribute("target");  // removeAttribute(attribute)
</script>

- Style update

  : classList, style

/* classList */
/* add(), remove(), contains(), toggle(), replace() */

<a id="person" class="">Home</a>
<input type="button" value="confirm" id="bbt">

<style>
  .textcolor{
    background-color:yellow;
  }
  .textborder{
    border:3px solid red;
  }
  .textpadding{
    padding: 10px;
  }
  .textnewcolor{
    background-color:blue;
  }
</style>

<script>
  var ele = document.getElementById("person");
  ele.className = "textcolor";  // className
  ele.classList.add("textborder");  // add()
  
  /* style */
  ele.style.float = "right";
  ele.style.marginRight = "40px";

  function testUpdate(){
    ele.classList.toggle("textpadding");  // toggle()
    ele.classList.replace("textcolor", "textnewcolor");  // replace()
    ele.classList.remove("textborder");  // remove()
  
    var attCheck = ele.classList.contains("textcolor");  // contains()
    if(attCheck) console.log("Yes");
    else console.log("No");                              // No
  }

  var bb = document.getElementById("bbt");
  bb.addEventListener('click', testUpdate, false);
</script>

이벤트를 실행하는 방법은 보통 세가지가 있다.

1. HTML 내 삽입

/* event에 on을 붙여 html 프러퍼티에 적용, 근래 많이 사용하지 않음 */
<p onclick="checkName()">Name</p>

<script>
  function checkName(){ ... }
</script>

2. DOM Event Handler

/* 모든브라우저에서 지원함. 이벤트별로 단 하나의 함수만 바인딩 가능 */
<p id="userName">User Kim</p>
<p>My name is <span id="res"></span></p>

<script>
  function checkName(){
    document.getElementById("res").innerHTML = ele.innerText;
  }
  var ele = document.getElementById('userName');
  ele.ononclick = checkName;  // 함수이름 괄호 생략, 함수이름뒤 괄호하면 지금 실행으로 해석됨
</script>

3. Event Listener

/* 현재 가장많이 사용되는 방법이며, 하나의 이벤트로 여러개 함수 실행 가능 */
<p id="userName">User Kim</p>
<p>My name is <span id="res"></span></p>

<script>
  // declaration
  function checkName(){
    document.getElementById("res").innerHTML = ele.innerText;
  }
  var ele = document.getElementById('userName');
  ele.addEventListener('click', checkName, false);  // 버블링false, 캡처링true
</script>

<script>
  // expression
  var checkName = function(){
    document.getElementById("res").innerHTML = ele.innerText;
  }
  var ele = document.getElementById('userName');
  ele.addEventListener('click', checkName, false);  // 버블링false, 캡처링true
</script>

<script>
  // parameter가 있는 경우
  function checkName(number){
    document.getElementById("res").innerHTML = ele.innerText + number;
  }
  var ele = document.getElementById("userName");
  var num = 5;
  ele.addEventListener('click', function(){    // 이벤트 핸들러나 리스너 지정할때, 함수이름
    checkName(num);          // 다음에 괄호 사용할 수 없으므로 인수를 전달할때 우회방법 사용
  }, false);                 // 익명함수 또는 익명함수에 파라미터 전달