js/browser - DOM -2

---

이벤트 객체

웹 서핑시 특정 이미지나 카드를 클릭하거나 드래그
→ 이렇게 클릭이나 드래그하는 일을 이벤트라 함

학습 목표

* 기초적인 event 이해와 event handler를 element에 적용하기
- onclick event
- onclick 에 직접 할당하는 것과 addEventListener의 차이
- eventHandler 함수를 만들고, eventHandler의 첫 번째 인자 사용하는 법

이벤트 객체

ex) POS기 만들기 예제
화면에 아메리카노나 카페라떼를 클릭하는 각각의 버튼 존재(아메리카노/카페라떼 버튼)
두개의 버튼을 클릭할 때 각각 ‘아메리카노를 클릭하셨습니다’
‘카페라떼를 클릭하셨습니다’ 라고 출력하자


let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;

function handleClick() {
  // 아래의 빈 칸(____)을 채우세요.
  let currentMenu = ____; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");
}

 
위의 두 버튼의 이벤트 핸들러는 동일한 함수(handleClick)에 의해 동작한다.
그렇다면 위의 코드에서 현재 메뉴의 이름을 가져오려면?
 
→ this 를 이용

 

function handleClick() {

  let currentMenu = this.textContent    // this를 이용하여 현재 클릭한 이름을 가져옴
  console.log(currentMenu + "를 클릭하셨습니다.");
}

 
사용자가 버튼을 클릭하면 그 버튼의 textConent(또는 innerHTML)을 이용해서 메뉴의 이름을 가져 옴
누른 버튼에 따라 이름이 달라지므로 클릭한 이벤트 객체(this)에서 메뉴의 이름을 가져오는 것
 
→ 이벤트 객체: 사용자 입력(onclick, onkeyup 등)을 트리거로 발생한 이벤트 정보를 담은 객체

 

ex2) 위의 예시에서 handleClick 함수를 event 인자를 받도록 변경한다면?


function handleClick(event) {
  console.log(event); // <-- 어떤 내용이 콘솔에 출력되나요?
  // let currentMenu = ____; // TODO
  // console.log(currentMenu + '를 클릭하셨습니다.');
}

 
위에서는 매개변수 event를 통해 인자를 가져오도록 이벤트 핸들러를 변경하였다
console.log(event)를 해보면 다음과 같이 나온다
 

PointerEvent {isTrusted: true, pointerId:1, width:1, height:1, pressure:0…}

→ 상세 내용 중
target:
srcElement:
해당 부분이 버튼에 대한 텍스트 정보를 가지고 있으므로
 

function handleClick(event) {
  // let currentMenu = event.target.textContent;        //또는 event.srcElement.textContent;
  // console.log(currentMenu + '를 클릭하셨습니다.');
}

 
이런 식으로 원하는 정보를 불러올 수 있다
 
function에 event(또는 e) 이벤트 객체를 넣어서 event.target.textContent 와 같은 방식으로 가져오는게 더 낫다
event 객체는 반드시 event 또는 e 라고 쓰도록 약속된 규칙!
 
→ this 로 받아오는 경우 정확히 지정이 안되어서 있으므로 결과 값이 달라질 수도 있다.

GlobalEventHandlers.onsubmit

현재 창에서 폼(form)을 제출하는 이벤트를 다루는 이벤트 핸들러
주로 form 태그 안에서 사용
 
기본문법
window.onsubmit = funcRef; 또는
form 태그 안에서 onsubmit=”func()” //함수의 실행이 아닌 함수값() 의 형태로 사용

 

ex) onsubmit 이벤트가 쓰이는 예

<form id="myForm" onsubmit="checkNull()" action="success.jsp"></form>

…

<script>
    function checkNull(){
        var idValue = $('#myId').val();
        var pWValue = $('#myPw').val();

        if(idValue == null || idValue ==''){
            alert("id를 입력하세요.");
            return false;
        }

        if(pWValue == null || pWValue ==''){
            alert("pw를 입력하세요.");
            return false;
        }
    }
</script>

유효성 검사! 의 목적으로 주로 사용(form 전송 직전에 form 태그 안의 데이터 유효성 검사)
 
→ 결과값을 리턴(boolean)하도록 구성하는 것이 사용 목적에 부합
→ true를 반환하면 form이 성공적으로 전송되고, false를 반환하면 form이 전송되지 않음
 
→return을 해주지 않는다면? 값이 어떻던 간에 그냥 action에 지정된 값으로 넘어 간다

GlobalEventHandlers.onchange

어떤 변화가 일어났을 때(바뀌었을 때) 작동하는 이벤트 핸들러

 
기본 문법
target.onchange = functionRef; 또는
<element onchange="myScript">

ex) text필드 입력하는 글자 수 만큼의 길이를 출력해 주는 예시

`HTML`

<input type="text" placeholder="Type something here, then click outside of the field." size="50">
<p id="log"></p>


`JS`

let input = document.querySelector('input');
let log = document.getElementById('log');

input.onchange = handleChange;

function handleChange(e) {
  log.textContent = `The field's value is
      ${e.target.value.length} character(s) long.`;
}

GlobalEventHandlers.onmouseover

해당 객체에 마우스가 올라 왔을 때(onmouserover) 발생하는 이벤트 핸들러

 
비슷한 류로 mouseseenter가 있는데
mouseseenter: 딱 정확히 자기 영역만 해당
mouseover: 자식에 해당하는 영역에 접근해도 이벤트가 발생함
 

기본 문법
element.onmouseover = functionRef;
 

ex) 마우스를 올렸을 때(onmouseover) 발생하는 이벤트 핸들러 예시

`HTML`
<p>Test your mouse on me!</p>


`JS`
const p = document.querySelector('p');
p.onmouseover = logMouseOver;    // 마우스오버시
p.onmouseout = logMouseOut;    //마우스아웃시(벗어 났을때)

function logMouseOver() {
  p.textContent = 'MOUSE OVER detected';
}

function logMouseOut() {
  p.textContent = 'MOUSE OUT detected';
}

GlobalEventHandlers.onkeydown/.onkeyup

키를 누르거나(onkeydown) 키를 놓을 때(onkeyup) 발생하는 이벤트 핸들러
DOM 상에서 window, document, 특정 element에서 발생 가능
 

기본문법
target.onkeyup = functionRef;
 

ex) onkeyup 시 발생하는 이벤트 핸들러 예시

`HTML`
<input>
<p id="log"></p>

`JS`
const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeyup = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}`;    // 입력한 키의 정보가 출력됨(ex. keyQ)
}

event.preventDefault()

이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소함
→ 기본적으로 정의된 이벤트를 작동하지 못하게 하는 메서드
 
cf.) event.stopPropagation() : 위와 유사하나 이는 해당 이벤트가 상위 엘리먼트 들에 전달되지 않게 막아줌
 
기본 문법
event.preventDefault()
 

ex) .preventDefault()를 이용한 올바르지 않은 텍스트가 입력되는 것을 막는 예시

<html>
<head>
<title>preventDefault 예제</title>

<script type="text/javascript">

function checkName(evt) {
var charCode = evt.charCode;

  if (charCode!= 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      alert("소문자만 입력할 수 있습니다." + "\n"
            + "charCode: " + charCode + "\n"
      );
    }
  }
}

</script>
</head>

<body>

<p>당신의 이름을 소문자만으로 입력해주세요.</p>
<form>
<input type="text" onkeypress="checkName(event);"/>
</form>

</body>
</html>

---

DOM 라이브 강의 내용 추가

DOM 이란?

HTML 문서의 구조와 관계를 객체(Object) 로 표현한 모델
둘다 트리구조(HTML, JavaScript Object)이므로 이를 이용한 것
document 전역변수를 이용해 접근
 
DOM이 JavaScript는 아니다
→ DOM 구조 접근을 그저 JavaScript를 이용해서 접근할 뿐
 

참고: node와 element의 관계?
→ node가 element의 상위 개념이다. Node 밑에 element가 속한다고 볼 수 있다?

 

console.dir()
→ 출력되는 모양이 Object 모양으로 나온다
 

.attributes
→ 속성 객체 ; id, class 이런거
 
.innerText
화면에 출력되고 있는 내용만 출력
 
.innerHTML
출력되는 내용뿐만 아니라 태그 등까지 출력
→ 태그까지 넣어서 사용 가능
 
.textContent
공백과 위치 등의 내용도 포함해서 출력(태그 미출력)
 
.value
→ 입력한 값(form 입력 값)
 
.data-속성에담긴값
→ 화면 상에 출력되진 않으나 숨겨진 값 같은 것을 설정하고 싶을 때
(태그 같은거 설정할 때)
→ dataset
 
<template> 태그
→ 모듈화를 할 때 유용한 태그

 
구글링시 참고할 만한 키워드: vanilla javascript dom manipulation cheat sheet
 
cheat sheet : 말 그대로 요약본 치트키처럼 정리해둔 시트 사이트

.onclick =function(){ } vs .addEventListener(‘click’, function(){ } )

onclick에는 하나의 콜백만 지정가능.
addEventListener를 사용하면 여러 개의 이벤트 리스너를 추가할 수 있다.
→ 그래서 실무에서는 후자를 더 많이 사용한다
 
파싱: 일종의 해석하는 작업
 
유용한 사이트(메소드 및 코딩 공부)
https://javascript.info/
https://www.w3schools.com/