Front-end/JavaScript

[자바스크립트] 이벤트 한번만 실행, 기본 이벤트 해제, one, cancelable, preventDefault

파리외 개발자 2022. 5. 31. 08:42

사용할 html 태그

 

one( ) - 한번만 실행되는 이벤트 등록

on()대신 one()을 사용하면 단 한번만 실행되는 이벤트를 등록할 수 있다.

버튼을 클릭하면 알림창이 뜨고 그 뒤로는 버튼을 눌러도 아무 효과가 나타나지 않는다.

 

 

 

preventDefault( ) - 기본 이벤트 효과를 해제

a태그는 보통 링크를 걸기 위해 자주 사용되는 태그다.

이처럼 몇몇 태그는 기본적인 효과를 가지고 있는데 이러한 효과를 해제하고 다른 이벤트로 대체할 수 있다.

a태그를 클릭했을 때 알림창을 뜨게 하고

콘솔에 cancelable을 이용해 해당 이벤트객체에 기본행동이 존재하는지 확인한다. 없다면 false가 뜬다.

만약 기본행동이 있다면 preventDefault메소드를 이용해 기본행동을 지워줄 수가 있다.

원래라면 a태그를 클릭하면 해당 href링크로 이동해야 하는데

이동 대신 알림창이 뜨고 만다.