[javascript] addEventLister

[javascript] addEventLister

본 글은 MDN 사이트를 참고 하였습니다.

설명

이벤트 리스너(EventListener)는 대상(예 : button, text 등)에 click, mouseover 등과 같은 이벤트가 발생하였을 때, 그에 상응하는 함수를 지정해주는 Web API를 말한다.

addEventListener 사용 예시

• html 코드는 아래와 같습니다.

• 
  <button id="hh2button">감사합니다. !</button>
  <p id="hh2result"></p>
              

• js 코드는 아래와 같습니다.

• 
  const buttonElement = document.getElementById('hh2button');
  const result = document.getElementById('hh2result');
  
  buttonElement.addEventListener('click', setEvent);
  
  function setEvent() {
      console.log(buttonElement.firstChild.nodeValue)
      if (buttonElement.firstChild.nodeValue==="감사합니다."){ 
      result.textContent = "별말씀을^^"
      }
  }
              

• 실행 결과
실행 결과를 확이하기 위해서 아래 "감사합니다"를 클릭해주세요!