JQuery Event

Event

시스템에서 일어나는 사건을 의미한다.
javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.

jQuery의 이벤트

크로스브라우징의 문제를 해결해줌
on로 이벤트 핸들러를 설치하고, off로 제거
trigger로 이벤트 핸들러를 강제로 실행 (예제2)
click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함

예제 코드

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            function clickHandler(e){
                alert('thank you');
            }
            $(document).ready (function(){ //ready로 이벤트 헬퍼 적용
                 $('#click_me').on('click', clickHandler);
                 $('#remove_event').on('click', function(e){
                     $('#click_me').off('click', clickHandler); //off메소드로 id값이 click_me인 버튼 봉쇄
                 });
                 $('#trigger_event').on('click', function(e){
                     $('#click_me').trigger('click');
                 });
             })
        </script>
    </head>
    <body>
        <input id="click_me" type="button" value="click me" />
        <input id="remove_event" type="button" value="unbind" />
        <input id="trigger_event" type="button" value="trigger" />
    </body>
</html>