[JavaScript] JavaScript에서 html의 element를 찾아 이벤트 적용하기

html에서 element들이 javascript에서는 객체로 다루어진다.

---

⚠️ element들은 JavaScript에서 Node라 불린다

- document.getElementById("아이디"); // Node 한개만 찾는다
- document.getElementByClassName("클래스이름"); // Node를 여러개 찾는다(NodeList)
- document.getElemetnByTagName("태그이름"); // Node를 여러개 찾는다(NodeList)

- querySelector("selector종류"); // Node 한개만 찾는다
- querySelectorAll("selector종류"); // Node가 여러개(NodeList)

  onload = function() { // window. 생략
      let btnList = document.querySelectorAll("button"); // Node를 여러개 찾는다
      btnList.forEach(function(btn, index) { // 하나, 하나 돌며
          btn.onmouseover = btnFun; // 이벤트 등록, 함수이름만 넣는다 ()넣지 말라
      }
  }

이벤트를 등록하는 가장 권장되는 방식, 이벤트리스너(EventListener)

---

DOM객체에 이벤트(event)가 발생할 경우,
해당 이벤트 처리 핸들러(Handler)를 추가할 수 있는 Object
(이벤트가 발생할 때, 특정함수를 호출한다)

  document.querySelector("h2").addEventListener("mouseover", function() { // 이벤트리스너(EventListener) 등록하기
      this.style.border = "1px solid red";
  });

⚠️ 이벤트리스너(EventListener) 삭제하기: DOM객체.removeEventListener("이벤트종류", 함수명);

🚀 자주 사용하는 이벤트 종류

- (1) 포커스이벤트 (focus, blur)
- (2) 폼 이벤트 (reset, submit)
- (3) 뷰 이벤트 (scroll, resize)
- (4) 키보드 이벤트 (keydown, keyup)
- (5) 마우스이벤트 (mouserover, mouseout, mousemove, cilck, dbclick)
- (6) 드래그 앤 드롭 이벤트 (dragstart, drag, drop)