JS | 이벤트 중단

JavaScript

JS | 이벤트 중단

개발 공부 2023. 1. 3. 16:37

이벤트 객체중의 하나인 이벤트 중단 기능

preventDefault()

고유특성을 가진 태그의 이벤트를 제거
ㄴ a와 submit은 고유 이벤트를 가지고 있다.

a와 submit은 고유 이벤트를 갖고 있어 핸들링하려면 고유 이벤트를 중단시켜줘야 한다.

예제 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul class="page">
            <li><a href="list.board">1</a></li>
            <li><a href="list.board">2</a></li>
            <li><a href="list.board">3</a></li>
            <li><a href="list.board">4</a></li>
            <li><a href="list.board">5</a></li>
        </ul>
    </div>

    <script>
        var page = document.querySelector('.page');
        //a태그는 클릭과 동시에 넘어가기 때문에 핸들링 할 수 없음
        page.onclick = function(){

            event.preventDefault(); //a태그 or submit이 가진 기본 이벤트를 중단
            if(event.target.tagName != "A") return;  //A가 아니라면 종료
            console.log(event.target.innerHTML);
            //처리....
        }
    </script>

    <hr>

    <form action="https://www.naver.com">
        <input type="text" name="age">
        <input type="submit" value="클릭" id="btn">
    </form>


    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            event.preventDefault(); //submit의 고유이벤트 중단
            //처리....
        }
    </script>

</body>
</html>