프로그래밍/JavaScript

자바스크립트 - 이벤트 타겟, 이벤트 취소( (preventDefault() )

맹이맹이 2020. 6. 25. 00:14
반응형

이벤트 타겟과 target 프로퍼티

- target 프로퍼티는 이벤트 타겟 객체를 가리킨다.

- 이벤트 타켓이란 이벤트를 유발시킨 객체

​

이벤트 객체의 프로퍼티를 출력해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener("DOMContentLoaded",init,false);
        function init(){
            let btn = document.getElementsByTagName("button")[0];
            btn.addEventListener("click",function(e){
                let text = "type : " + e.type + "<br>" + "target : " + e.targer
                + "<br>" + "currentTarget : " + e.currentTarget + "<br>"
                + "defaultPrevented :" + e.defaultPrevented;
                let pTag = document.getElementById("p");
                pTag.innerHTML = text;
            },false);
            
        }
     </script>
</head>
<body>
    <h3>targer</h3>
    <p id="p">버튼 클릭하면 객체 출력</p>
    <button>클릭</button>
</body>
</html>

클릭 전

클릭 후

type

프로퍼티

현재 발생한 이벤트 종류 나타냄

target

프로퍼티

이벤트 발생시킨 객체

currentTarget

프로퍼티

현재 이벤트 리스너 실행 중인 DOM 객체

defaultPrevented

프로퍼티

이벤트의 디폴트 행동이 취소됐는지 T/F

preventDefault

메소드

이벤트의 디폴트 행동 취소 메소드

​

​

이벤트의 디폴트 행동 취소, preventDefault()

- 이벤트의 디폴트 행동을 취소시키는 메소드

​

1) 이벤트 리스너에서 false를 리턴하기

<a href="http://www.naver.com" onclick="return false">이동 불가</a>

2) 체크박스 활용

3) preventDefault() 호출

<a href="http://www.naver.com" onclick="event.preventDefault()">이동불가</a>

과연 모든 이벤트의 디폴트 행동을 금지할 수 있는가?!

- 모든 이벤트에 대해 행동을 취소할 수 있는 것은 아니다!

- 이벤트 객체의 cancelable 프로퍼티가 true인 경우만 취소가 가능하다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function noAction(e){
            e.preventDefault();
        }
     </script>
</head>
<body>
    <a href="http://www.naver.com" onclick="noAction(event)">네이버 이동</a>
</body>
</html>

네이버 이동을 클릭해도 아무런 행동이 나타나지 않는다!

​

혹시나 궁금한 점은 댓글로 남겨주세요!

반응형