티스토리 뷰

7. 코딩 일지

자바스크립트 - 입력값을 나타내어 주는 코드 addEventListener사용

dahaha 2020. 3. 24. 23:41

 

예제들로 실제 응용되는 사례를 찾아보고 있는데 역시나 어렵다.

공부한지 얼마안된 초보로서 자바스크립트를 공부하면서 헷갈리는 점은..

어떤게 임의로 정한 변수나 객체이고 어떤게 명령어인지 구분하기 어렵다는 것이다.

(문법과 명령어에 대한 지식이 부족해서 그럴것이다..)

 

그래서 MDN에 있는 예제를 변형하고 주석을 달아보았다.

1. 임의로 정한 변수는 aaa, bbb와 같이 누가봐도 명령어가 아닌 것으로 바꿨고

2. 나름대로 해석한 것을 아래 코멘트를 달았다.(초짜라 허접하다)

 

예제

아래와 같이 빈칸에 타이핑을 하면 그 입력키 값이 글자로 반환되는 코드다.

addEventListener를 사용하였다

 

[작성예제 최종화면]

[사용 코드와 주석]

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
<input placeholder="Click here, then press down a key." size="40">
<p id="ccc">  </P>
  <script>
    const aaa = document.querySelector('input');
    // 인풋태그 안을 상수 aaa로 선택함
    const bbb = document.getElementById('ccc');
    /* <p>태그에 특정 id값 ccc을 가지고 오는 함수는 document.getElementById이고
    이것을 bbb라고 함
    즉, bbb가 p태그 안에있는 값
    */

    aaa.addEventListener('keydown', ddd);
    /* 대상(tarket)인 aaa에 이벤트가 전달될때마다 호출되는 함수인 addEventListener
    로 keydown이벤트가 전달될때 ddd함수를 실행함
    */
    function ddd(eee) {
      bbb.textContent += `${eee.code}`;
    }
    /* ddd라는 함수는 상수 bbb에 입력된 텍스트를 가지고 오고(textContent사용)
    이때 keydown의 값은 매개변수 eee.code를 통해서 bbb에 추가되게 된다
    */
</script>
  </body>
</html>

[관련자료]

addEventListener 함수에 대한 생활코딩의 강의 https://opentutorials.org/course/1375/6761

 

addEventListener() - 생활코딩

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. var t = document.getElementById('target'); t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); }); 이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메

opentutorials.org

 

저작자표시 비영리 변경금지

'7. 코딩 일지' 카테고리의 다른 글

리액트(React)를 배우기 시작하며  (0) 2020.08.26
CSS로 밑줄 두껍게 넣는 가장 간단한 방법  (1) 2020.08.17
파이썬으로 인스타그램 이미지 크롤링하여 다운로드하기  (7) 2020.08.09
티스토리, 네이버, 워드프레스, 홈페이지, 어플 장단점 총 정리  (0) 2020.05.24
NODE.JS에서 사용하는 PM2 명령어  (0) 2020.03.20
자바스크립트(JAVASCRIPT) 조건문 스스로만든 예제  (0) 2020.03.18
자바스크립트(JAVASCRIPT) 함수부분 연습하기  (0) 2020.03.18
문과생을 위한 코딩 배우는 순서 추천  (0) 2020.03.18
댓글