JavaScript preventDefault

a태그를 상대로 addEventListener("click",)을 활약시키는 방법

HTML

    <div class="test">

      <p class="testtext">테스트01</p>

      <p class="testtext">테스트02</p>

      <p class="testtext">테스트03</p>

      <p class="testtext">테스트04</p>

      <a href=""><button class="btn">텍스트 변환</button></a>

    </div>

 

JavaScript

const testtext = document.querySelectorAll(".testtext");

const btn = document.querySelector(".btn");

for (let i = 0; i < testtext.length; i++) {

  btn.addEventListener("click", function () {

    testtext[i].textContent = "자바스크립트로 텍스트 변경함";

  });

}

 

ON BROWSER

스크립트는 기능하지만 클릭과 동시에 a태그가 활성화되어 새로고침당한다.

 

 

 

해결법① a태그 링크 란에 #를 적는다

    <div class="test">

      <p class="testtext">테스트01</p>

      <p class="testtext">테스트02</p>

      <p class="testtext">테스트03</p>

      <p class="testtext">테스트04</p>

      <a href="#"><button class="btn">텍스트 변환</button></a>

    </div>

 

 

 

해결법② 이벤트를 막기위해 매개변수를 설정한 후, 「.preventDefault()」를 추가한다.

html 에서 a 태그나 submit 태그는 고유의 동작이 있다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다.

const testtext = document.querySelectorAll(".testtext");

const btn = document.querySelector(".btn");

for (let i = 0; i < testtext.length; i++) {

  btn.addEventListener("click", function (e) {

    testtext[i].textContent = "자바스크립트로 텍스트 변경함";

    e.preventDefault();

  });

}

 

ON BROWSER