[jQuery] 이벤트 종류

이벤트란 어떠한 행위를 했을 때 어떤 반응이 일어나는 순간을 의미한다. 예를들어, 버튼을 클릭했을 때 로그인이 되거나, 페이지 이동이 일어나는 것도 클릭 이벤트의 한 종류이다.

HootJem

Sep 06, 2024

Contents

Mouse 이벤트 Keyboard 이벤트 Form 이벤트 On() 메서드

이벤트란 어떠한 행위를 했을 때 어떤 반응이 일어나는 순간을 의미한다.

예를들어, 버튼을 클릭했을 때 로그인이 되거나, 페이지 이동이 일어나는 것도 클릭 이벤트의 한 종류이다.

대표적인 이벤트의 종류는 다음과 같다.

Mouse Events	Keyboard Events	Form Events
click	keypress	submit
dblclick	keydown	change
mouseenter	keyup	focus
mouseleave		blur

Mouse 이벤트

마우스 작동시 일어나는 다양한 이벤트이다.

click : 마우스로 요소 클릭시

dblclick : 마우스로 두번클릭시

mouseenter : 마우스포인터가 해당 요소 내부로 들어갔을시

mouseleave : 마우스 포인터가 해당 요소 밖으로 벗어날때


<body>
    <p> p 태그 누르면 클릭 이벤트</p>
</body>
<script>
    $("p").click(function () {
        $("p").hide();
    });
</script>

위 코드의 click 이 들어있는 자리를 대체 가능하며 원하는 동작을 넣을 수 있다.

Keyboard 이벤트

keypress : 키 눌러졌을 시 (엔터, 스페이스 키에는 반응하는데 글자 키는 반응하지 않음 ㅠ)

keydown : 키가 눌러진 순간

keyup : 키에서 손이 떼어질때


<body>
    <p> Keyboard 이벤트</p>
    <input type="text">
 
</body>
<script>
    $("input").keypress(function () {
        $("input").css("background-color", "lightblue");
    });
</script>

설정한 이벤트에 맞게 백그라운드 색이 변한다.

Form 이벤트

submit : 서브밋은 폼 제출이 이루어질 때 발생한다.


<body>
    <p> form 이벤트</p>
    <form id="myForm">
        <input type="text" placeholder="텍스트를 입력하세요">
        <button type="submit">Submit</button>
    </form>
    <p id="message"></p>

</body>
<script>
    $("#myForm").submit(function (event) {
        event.preventDefault(); // 폼 제출 기본 동작 막기
        $("#message").text("서브밋");
    });
</script>

폼 하단의 p 태그에 “서브밋” 이라는 문자가 출력된다. 주로 폼 내용의 검사 및 AJAX를 이용한 비동기 전송 에 활용된다.

change : <input>, <select>, <textarea> 요소의 값이 변경된 후 발생


   <select id="mySelect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
    <p id="selectedOption"></p>

    <script>
        $("#mySelect").change(function () {
            let selectedValue = $(this).val();
            $("#selectedOption").text("Selected: " + selectedValue);
        });
    </script>

mySelect 의 값이 바뀌게 되면$(this).val() 을 통해 바뀐 밸류(value="option1")가 selectedOption 태그 내부에 text 로 나타나게 된다.

focus : 폼 필드에 포커스가 들어가면 실행됨

blur : 포커스를 잃으면 실행됨


    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email">

    <script>
        $("input").focus(function () {
            $(this).css("background-color", "yellow");
        });
        $("input").blur(function () {
            $(this).css("background-color", "green");
        });
    </script>

On() 메서드

on() 메서드는 선택된 요소에 하나 이상의 이벤트 핸들러를 연결시키는 역할을 한다.


<body>
    <p> form 이벤트</p>
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email">

</body>
<script>
    $("input").on({
        focus: function () {
            $(this).css("background-color", "yellow");
        },
        blur: function () {
            $(this).css("background-color", "green");
        }
    });
</script>

on() 사용안한 이벤트 핸들러


$("input").focus(function () {
    $(this).css("background-color", "yellow");
});
$("input").blur(function () {
    $(this).css("background-color", "green");
});

바로 상단처럼 input 태그에 대해 각각 이벤트를 지정해 줄 수 있지만

on() 메서드를 사용하여 이벤트 연결이 가능하다.

동적 생성된 Dom 선택도 가능..!

element 선택 하는 부분에 “input” 처럼 태그, 클래스 등을 적을 수 있지만


  $(document).on('focus', 'input', function () {
        $(this).css("background-color", "yellow");
    });

이와 같이 document 를 넣어 페이지 로드가 끝났을 때 감지된 input 뿐 아니라

추후에 동적으로 생성될 요소도 감지할 수 있다. (댓글 입력 후 동적으로 추가 했을 때 유용하다.)


<body>
    <p> form 이벤트</p>
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email"><br>

</body>
<script>
    // 동적으로 추가된 요소에도 이벤트가 작동하는 예시
    $(document).on('focus', 'input', function () {
        $(this).css("background-color", "yellow");
    });

    $(document).on('blur', 'input', function () {
        $(this).css("background-color", "green");
    });

    // 새로운 input 요소 추가
    $('body').append('<input type="text" name="newField" placeholder="새필드">');
</script>

이 코드에 의하면 제일 하단의 새필드 는 load 가 끝난 뒤 생성되었다.

만약 요소 선택자에 input 을 넣는다면

제일 아래 요소는 포커스, 블러 어떤 이벤트가 일어나더라도 변경되지 않는다.

요소 선택자 자리에 위의 코드처럼 document 를 선택하여 작성 시

동적으로 생성된 요소도 이벤트가 잘 적용되었음을 알 수 있다.