JavaScript, Vue.js, CSS/JavaScript

[JavaScript] 이벤트 핸들러

삶_ 2022. 7. 28. 11:43

 

 

Map, Set

Map

  • key:Value 쌍으로 구성됨
  • map.keys() : 키의 값들을 전부 가져옴
  • map.set(키,값) : 키와 값 설정
  • map.get(키) : 키의 값 반환
  • map.has(키) : 키를 갖고있는지 (true/false)
  • map.delete(키) : 해당 키와 값을 제거

 

Set

  • 중복X. 입력된 순서에 따라 데이터를 저장
  • set.add(값) : 값 추가
  • set.delete(값) : 값 제거
  • set.has(값) : 값을 갖고 있는지 (true/false)

 

 

HTML 이벤트 핸들러

  • HTML 요소에 대한 이벤트 (사용자의 동작으로 인한 특정한 상황 등)
  • 객체.on이벤트명 = function() {...}
  • 같은 객체에 대해 동일한 이벤트 여러번 사용 불가능

 

  • click : 클릭시 발생
  • change : 변동이 있을시 발생 (select 에서 다른 옵션으로 바꿨을때 등)
  • focus : 포커스를 얻었을때 발생
  • blur : 포커스를 잃었을 때 발생
  • keydown : 키를 눌렀을때 발생
  • keyup : 키에서 손을 떼었을때 발생

 

  • cut : 글 잘라낼 때
  • copy : 글 복사할 때
  • paste : 글 붙여넣기 할 때

 

  • scroll : 사용자가 페이지를 위아래로 스크롤 할때
  • load : 문서의 로드가 완료 되었을때 발생 (문서가 모두 로드되어야 함)
  • unload : 문서가 언로드 되었을때 발생
  • resize : 윈도우 크기가 변경될 경우 발생

 

  • mouseover : 마우스가 특정 객체 위로 올려졌을 때 발생
  • mousedown : 마우스를 클릭했을때 발생
  • mouseout : 마우스가 특정 객체 밖으로 나갔을 때 발생
  • mousemove : 마우스가 움직였을 때 발생
  • mouseup : 마우스에서 손을 떼었을 때 발생

 

  • select : option 태그 등에서 선택을 했을 때 발생
  • submit : 입력양식이 제출 요청될 때 발생
<script>
  document.getElementById('b1').onclick = function() {alert("버튼 클릭됨!!")}
</script>

<body>
  <input type="button" id="b1">
</body>

 

addEventListener()

  • document의 특정요소(id,class,tag 등..)의 이벤트를 실행하면 함수를 실행하라는 뜻
  • 객체.addEventListener('click', function(event) {...함수내용...} 아니면 그냥 함수이름넣기);

 

 

 

DOM

  • HTML 등 문서에 접근하기 위한 일종의 인터페이스
  • 자바스크립트는 새로운 HTML 요소, 속성을 추가 가능
  • document node(모든 dom 트리에 접근하기 위한 시작점), element node(HTML 구성요소(태그들)),
  • attribute node(태그들의 속성을 객체화), text node(태그의 텍스트를 객체화)

 

document

  • 문서 전체(웹페이지 그 자체를 의미, body 내부)
  •  document.querySelector().innerHTML("div4")
    • div4의 엘리먼트를 갖고옴 (첫번째만)
    • querySelectorAll() : 클래스 그룹 속해있는거 전부 적용
  • document.createElement() : 요소/태그 추가
  • classList
    • 요소 읽기 전용으로 쓰이며 class 목록 조작 가능
    • classList.contains(’클래스명’) : 지정한 클래스의 값이 존재하는지 확인 (true/false)

 

HTML 요소 핸들러

  • 자바스크립트 코드를 사용해 DOM 엘리먼트(특정 HTML 태그) 를 선택해
  • 속성으로 이벤트 발생시 호출될 콜백 메서드를 정의함
  • HTML 속성은 대소문자 구분X

 

 

getElement(s)ByXXX()

  • document.getElementById("result").innerHTML = "name";
    • id가 result인 태그를 찾아 HTML에 출력된 값을 => "name" 으로 출력
    • 얘 뺴고는 elements 로 시작하는 애들은 다 배열임 (전체를 잡아줌)
  • document.getElementsByTagName("태그이름") : 태그이름에 해당하는 것 전체
  • document.getElementsByName("name값") : 속성 name="값" 에 해당하는 값을 고름
  • document.getElementsByClassName("클래스이름")
    • 문서에서 해당 클래스에 해당하는 것
    • 만약 같은 클래스가 여러개 있을 때, 저 값의 변수이름이 let cn = ... 이런식으로 선언 되있을 경우,
      • let cn = document.getElementsByName("클래스이름")
        • cn[0].innerHTML
      • document.getElementsByName("클래스이름")[0].innerHTML = "해당클래스에 속해있고 가장 첫번째로 선언된것"
      • document.getElementsByName("div1").getElementsByTagName("p").innerHTML = "<strong>하하하</strong>";
        =>  클래스 이름이 div1 이고, p태그가 있는 곳을 찾아서 "<strong>하하하</strong>" 로 반영
//특정 요소(태그 등) 가져오기
document.getElementsByTagName("tag_name")
document.getElementById("id_name")
document.getElementsByClassName("class_name")
document.getElementsByName("name_attribute")

 

 

HTML 요소 생성/제거/추가

//문서에 HTML 요소 추가하기
document.createElement(element)    

//문서에 HTML 요소 제거하기
document.removeChild(element)

//문서에 맨 뒤에 요소 추가하기. node 객체만 자식요소로 추가 가능
document.appendChild(element)  

//특정 부모노드의 한 자식노드를 다른노드로 교체
document.replaceChild(newchild, oldchild)

 

 

자식노드, 부모노드

//a의 부모노드 찾기
let a = a.parentNode;

//b의 모든 자식노드들 찾기 
let b = b.childNodes;

 

 

 

querySelector()

  • getElement(s)ByXXX() 와 달리, 단일 메서드로 원하는 요소를 찾음
//해당 조건에 맞는 첫번째 노드만 가져오기
document.querySelector("#main, #title, #footer");

//해당 조건에 맞는 모든 노드 가져오기 = 배열로 담아짐
document.querySelectorAll("p.note, p.tip")

 

 

 

 

 

HTML 요소 속성 핸들러

 

XXXAttribute()

  • 속성은 대소문자 구분X
//해당 태그의 속성값 설정하기
element.setAttribute(attribute, value)

//해당 태그의 속성값 가져오기
element.getAttribute(attribute, value)

//해당 태그의 속성값 제거하기
element.removeAttribute(attribute)

 

innerHTML, innerText

  • innerHTML : 태그 바디에 다른 HTML 태그와 자식노드를 포함한 텍스트 처리
    • document.getElementById("어쩌구").innerHTML = <strong>ABC</strong>;
    • 출력 시, ABC
  • innerText : 단순 텍스트만 처리할 때 사용
    • document.getElementById("어쩌구").innerHTML = <strong>ABC</strong>;
    • 출력 시, <strong>ABC</strong>

 

 

그 외

window.onload = () => {
시작시 실행될 내용
}

 

스코프

  • var g = 'global' //전역변수라는 뜻

 

Event.target

  • 이벤트를 발생시킨 요소를 가리킴

Event.preventDefault()

  • a 태그나 submit 태그를 누르면 href로 이동하거나 창이 새로고침됨.
  • 그런데 그 고유 동작을 중단시킴.

Event.stopPropagation();

  • 이벤트가 부모요소로 전파되는 것을 막음

 

 

this vs qurrentTarget

  • 이벤트 핸들러 내에선 서로 같은 의미
  • this : 이벤트 핸들러 내의 전역객체 window를 가리킴 (이벤트 핸들러를 일으킨 주체)
    • (현재 부모요소라면 부모요소에 해당)
  • qurrentTarget 과 같은 의미
<!DOCTYPE html>
<html>
<body>
  <button class="btn">Button</button>
  <script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', function (e) {
      console.log(this); // <button id="btn">Button</button> , this = btn
      console.log(e.currentTarget); // <button id="btn">Button</button>
      console.log(this === e.currentTarget); // true
    });
  </script>
</body>
</html>

 

 

참고

https://dinfree.com/lecture/frontend/123_js_3.html

저작자표시