본문 바로가기

HTML/Javascript 기초

[Javascript] 이벤트 단계

이벤트가 몇번째 단계에서 실행되는지 확인하는 스크립트를 작성해보자.

 

event.eventPhase : 이벤트가 몇번째 단계에서 실행되는지

event.target : 이벤트가 어디에서 실행되는지

event.type : 이벤트가 실행된 객체의 타입

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery event handling sample</title>
    <script src="../../js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").on("click", function () {
                console.log("현재 이벤트 단계 : ", event.eventPhase);
                console.log("이벤트 타겟 : ", event.target);
                console.log("이벤트 타입 : ", event.type);
                alert("안녕하세요");
            });
        });

    </script>
</head>

<body>
    <input type="button" value="button" id="btn">
</body>

</html>

 

 

728x90
반응형