[JQuery] 제이쿼리의 Event 처리

Framework & Library/JQeury

[JQuery] 제이쿼리의 Event 처리

gangintheremark 2023. 7. 14. 16:28

728x90

이벤트 연결 (event binding)

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러 함수를 작성해야 한다. 작성된 이벤트 핸들러를 특정 요소(이벤트 소스)에 연결하는 것을 이벤트 연결(event binding)이라고 한다.

$(이벤트소스).on("이벤트타입", 이벤트 처리 함수 );

<head>
    <script>
        $(document).ready(function () {
            // 이벤트 처리를 위한 이벤트 소스 값 가져오기 

            // 💡 button 이벤트 처리
            $("#ok").on("click", function () {
                console.log(this); // Js객체
                console.log($(this)); // Jquery 객체 👉 이벤트소스에 대한 정보를 얻어서 우리가 필요한 작업을 할 수 있다
                console.log($(this).text()); // Jquery 객체

                console.log(event); // Event 객체
                console.log(event.target); // Event 객체를 이용해서 이벤트 소스 객체 참조가능
            });

            // 💡 text 이벤트 처리
            $("#txtInput").on("keyup", function(){
                console.log($(this).val());
            });

            // 💡 select 이벤트 처리
            $("select").on("change", function(){
                console.log($(this).val());
                console.log($(":selected").text());
            });

            // 💡 submit 이벤트 처리 
            $("form").on("submit", function(){
                // 아이디는 필수 항목
                var id = $("#userid").val();

                if(id.length== 0){ // 아이디에 입력하지 않았으면
                    event.preventDefault(); // 자동 submit 방지
                    alert("아이디는 필수"); // alert 메시지 표시
                    $("#userid").focus();  
                }
            });
        });
    </script>
</head>
<body>
    <button id="ok">OK</button><br>
    text:<input type="text" id="txtInput" /> <br>
    <hr>
    <form action="http://www.google.com">
        아이디<input type="text" name="userid" id="userid"><br>
        비밀번호<input type="text" name="passwd"><br>
        <select name="fruit">
            <option value="사과">사과</option>
            <option value="바나나">바나나</option>
            <option value="수박">수박</option>
        </select><br>
        <input type="submit" value="전송">
    </form>
</body>

💡 this

이벤트에 의해 실행되는 함수 안에서 this를 사용할 수 있다. $(this)는 이벤트가 발생한 자기 자신을 감지할 수 있게 된다. 일반적으로 동일한 소스가 반복되는 곳에서 사용된다. 예를들어 class의 이름이 여러 개가 동일한 경우 한 군데에만 이벤트를 주고 싶을 때 사용한다.

동적으로 추가된 DOM 객체에 대한 이벤트

자바스크립트를 이용하여 동적으로 추가된 태그에 이벤트를 추가하기 위해 이벤트 연결은 다음과 같이 이뤄진다.

$(document).on("이벤트타입", "#id명", 이벤트 처리함수 )

<head>
    <script>
        $(document).ready(function () {

            $("#ok").on("click", function(){
                $("div").html("<button id='x'>ok</button>");
            });

             // 동적으로 추가된 DOM객체에 대한 이벤트 처리
            $("body").on("click", "#x", function(){
                console.log("ok");
            });
        });
    </script>
</head>

<body>
   <button id="ok"> 버튼 추가</button> <br>
   <div></div>
</body>

trigger 이벤트

trigger() 는 선택된 요소에 강제로 이벤트를 발생시키는 메소드이다.

$("selector").trigger("이벤트타입")

<head>
    <script>
        $(document).ready(function () {

            $("#ok").on("click", function(){
                $("#result").text("ok버튼에 trigger 이벤트 발생").css("color","red");
            });

            $("#ok2").on("click", function(){
                $("#ok").trigger("click");
                 // ok 버튼에 trigger 이벤트 발생
                 // ok2 버튼을 누르면 ok버튼을 안눌러도 ok버튼이 click된 것으로 실행
            });
        });
    </script>
</head>

<body>
   <button id="ok">ok</button> <br>
   <button id="ok2">trigger</button> <br>
   <div></div>
</body>

</html>

728x90