지난 게시글에 이어서 이번에는 이벤트(onclick, onkeyup 등)에 대해 살펴보도록 하겠다.

5. 이벤트(onclick, onkeyup 등)

  • onclick

vue image
onclick 이벤트를 이용해, 왼쪽 화면의 'Tweet!' 버튼을 눌렀을 때 콘솔 창에 'Thank you!'라는 값이 출력될 수 있도록 만들 수 있다.
내가 'Tweet!' 버튼을 세 번 누르니까 콘솔 창에서도 'Thank you!'가 세 번 출력되었다.

또, 아래처럼 함수를 따로 만들어서 붙여줄 수도 있다.
vue image
대신, 함수를 붙여줄 때는 함수를 실행하지 않은 채로 붙여줘야한다는 것을 주의하자!

  • onkeyup

vue image
onkeyup 이벤트를 이용해, Message 상자 안에서 키보드 타이핑을 할 때마다 콘솔 창에 'Wow!'가 출력되도록 만들 수 있다.
내가 Message 상자안에서 '안녕하세요'를 입력하며 키보드에서 손가락을 떼는 것을 18번 반복하니까 콘솔 창에서도 'Wow!'가 18번 출력되었다.

- 엘리먼트 선택

지금까지 $0를 이용해 엘리먼트를 가져오는 방법을 알아보았는데, 언제까지나 이 방법을 쓸 수는 없다.
이제부터는 Javascript를 이용해, 특정 엘리먼트를 선택하고 가져오는 방법에 대해 알아보자.

  • 태그를 이용: getElementByTagName
  • id를 이용: getElementById
  • class를 이용: getElementByClassName
  • selector를 이용: querySelector/ querySeletorAll

위에 보이는 것처럼 엘리먼트를 선택하는 방법에는 다양한 방법들이 있지만,
querySelector를 이용하면 id나 class를 메소드 이름으로 구분하지 않고 가져올 수 있어서 편하다.
vue image
querySeletor를 이용해 namebox를 가져와보았다.

예1) Tweet! 버튼을 눌러 Username 칸에 입력한 값을 가져오게 하려면?

vue image
onclick 이벤트와 value를 함께 사용해서 위와 같이 코드를 작성해주면,
Username 칸에 입력한 값이 Tweet! 버튼을 누름과 동시에 콘솔창에 출력되는 것을 볼 수 있다.

예2) Username 칸에 입력한 대로 그 값을 가져오게 하려면?

vue image
이 때는, onkeyup 이벤트를 이용해 namebox의 value를 가져와주면 된다.

예3) Username 칸에 입력한 값을 Tweet! 버튼에서 출력하게 하려면?

vue image
이 때는, innerHTML을 사용해야한다!
onkeyup 이벤트를 사용한 뒤, tweetbtn.innerHTML은 namebox.value와 같다는 코드를 작성해주면 namebox에 입력한 값이 tweetbtn에도 출력된다.

- DOM 조작 (innerHTML)

innerHTML 속성을 이용해 새로운 엘리멘트를 만들 수도 있다.

변경 전 HTML
<div id="target>변경 전</div>
Javascript
let target = document.querySelector('#target');
target.innerHTML = `
    <span>변경 후</span>
`;
변경 후 HTML
<div id="target>
  <span>변경 후</span>
</div>

- DOM 조작 (메소드)

새로운 엘리먼트를 만들기 위해 메소드를 사용하는 방법도 있다.
메소드를 사용하는 방법은 innerHTML에 비해 조금 복잡하게 느껴질 수도 있지만, 이 방법은 엘리먼트를 생성하는 것과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있다.
vue image

document.createElementappendChild 메소드를 이용해, 새로운 자식 엘리먼트인 span 태그를 만들어주었다.

이 외에도 "vanilla javascript dom manipulation cheet sheet"를 검색하면 다양한 DOM 메소드를 찾아볼 수 있다.

- DOM 조작 (<template> 태그)

변경 전 HTML
<template id="will-be-rendered">
  <span>변경 후</span>
</template>

<div id="target">변경 전</div>
Javascript
let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered");

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사한다.
let newContent = document.importNode(template.content, true);

// target 내용을 비운다.
target.innerHTML = '';
target.appendChild(newContent);
변경 후 HTML
<div id="target">
  <span>변경 후</span>
</div>

사실 이 template 부분이 전혀 이해가 되지 않은 상태라, 이 부분은 좀 더 공부를 해보고 추가로 설명을 덧붙여야겠다.


마무리

twittler 과제는 내가 직접 이것 저것 건들여보고, 원하는 대로 웹페이지를 꾸며볼 수 있어서 재미있는 과제이긴 하지만 아직 나에겐 난이도 상의 어려운 과제이다...
twittler 부터 진도가 밀리고 온라인 강의 내용이 제대로 숙지되지 않아서, 다시 강의 내용을 복습하며 twittler를 만들고 있다.
그 전 과제들보다 복잡하고 막힐 때도 많지만 어려운 부분은 구글에 검색하거나 다시 강의를 들어보며 차근차근 해내야겠다.