Remove Default Event

Namiya·2025년 7월 14일

JavaScript 연습

목록 보기

22/27

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
    <title>Remove default event</title>
    <style>

        ul { margin: 50px; }

        ul > li { margin-top: 25px; }

    </style>
</head>
<body>

    <ul>
        웹 사이트 목록
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.naver.com">Naver</a></li>
        <li><a href="http://www.daum.net">Daum</a></li>
        <li><a href="http://www.facebook.com">Facebook</a></li>
        <li><a href="http://www.twitter.com">Twitter</a></li>
    </ul>

    <script>

        // 1. 문서에 있는 모든 링크들을 찾아
        for (let i = 0; i < document.links.length; i++) {
            // 2. 그 링크를 클릭하면
            document.links[i].addEventListener("click", function (event) {
                // 3. 지정한 참조 URL로 이동하지 않고
                event.preventDefault();

                // 4. window.alert 메서드로 참조 URL을 경고 창에 출력
                // window.alert(this.getAttribute('href'));
                window.alert(this.href);
            });
        }

    </script>

</body>
</html>

Namiya

이전 포스트

Standard Event Model Toggle

다음 포스트

Remove Default Event

JavaScript 연습

Standard Event Model Toggle

Image Gallery

0개의 댓글