defaultPrevented 이벤트 속성 개념 총정리

 

🤷‍♂️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해

---

자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 

이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다.

예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다.

이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다.

이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를 작성할 수 있습니다.

자바스크립트에서는 addEventListener() 메서드를 사용해 이벤트 핸들러를 등록합니다.

이는 특정 HTML 요소에 이벤트를 모니터링하게 해 주고 요소당 하나 이상의 핸들러를 등록할 수 있게 해 줍니다.

 

---

 

🤷‍♂️ addEventListener 기본 문법

target.addEventListener(event, function, useCapture);

 

addEventListener 더 자세히 알아보기

https://cometruedream.tistory.com/19

오늘은 addEventListener 에 대해서 알아봐요!

 

---

 

🤷‍♂️ defaultPrevented 이벤트 속성

defaultPrevented 이벤트에 대해서 알기에 앞서 preventDefault 와 stopPropagation 이벤트에 대해서 알아보자

preventDefault 란?

a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.

주로 사용되는 경우는
1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

ex:
<a href="https://cometruedream.tistory.com/">꿈많은 개발자</a>

$("a").click(function(e){
      e.preventDefault();
     alert("e.preventDefault()");
});

 

stopPropagation 란?

e.stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.
 
ex: 
<div class="first-cover">
  <ul class="second-cover">
    <li class="third-cover">
      <div class="last-el">event</div>
    </li>
  </ul>
</div>

e.stopPropagation 추가 시킴으로 상위에 전달되는 이벤트를 막아준다. 
$(".last-el").click(function(e){
e.stopPropagation();
alert("last-el");
});

$(".third-cover").click(function(){
alert("third-cover");
});

$(".second-cover").click(function(){
alert("second-cover");
});

$(".first-cover").click(function(){
alert("first-cover");
});

 

정의 및 사용

defaultPrevented 이벤트 속성은 이벤트에 대해 preventDefault() 메서드가 호출되었는지 확인합니다.

 

예시

링크가 URL을 여는 것을 방지하고 preventDefault()가 호출되었는지 확인하십시오.

document.getElementById("myAnchor").addEventListener("click", function(event){  
     event.preventDefault()  alert("Was preventDefault() called: " + event.defaultPrevented);
});

 

 

기술적 세부 사항

반환 값:

이벤트에 대해 preventDefault() 메서드가 호출되었는지 여부를 나타내는 부울입니다. 가능한 값: • true - 이벤트에 대해 preventDefault() 메서드가 호출되었습니다. • false - 이벤트에 대해 preventDefault() 메서드가 호출되지 않았습니다.

 

---

URL인코딩 & 디코딩 해보기