#TIL26 (3)

이벤트란?

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

이벤트 종류

출처) https://api.jquery.com/category/events/

• .bind(): 요소에 대한 이벤트에 핸들러를 연결
• .unbind(): 요소의 이전에 연결된 이벤트 핸들러를 제거
• .on(): 하나 이상의 이벤트에 대한 이벤트 핸들러 함수를 선택한 요소에 연결
• .off(): 이벤트 핸들러를 제거
• .trigger(): 이벤트 강제 실행
• .ready(): 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생

jQuery의 이벤트

• 크로스브라우징의 문제를 해결해줌
• 3.xx부터는 bind() 기능을 제공하지 않음
  • 1.0 ~ 1.7 이하 버전 : bind()
  • 1.7 ~ 3.0 미만 버전 : bind(), on() 모두 사용 가능
  • 이상 최신 버전 : on()
• jQuery 1.7부터 .bind(), .live(), .delegate()의 메소드 기능이 .on()으로 통합됨
• jQuery 1.7부터 .on() 메소드는 이벤트 핸들러를 연결하는 데 필요한 모든 기능을 제공

예제1

  <script>
    function clickEvent(event) {
      alert('안녕하세요');
    }
    $(document).bind('ready', function () {
      $('.click_me').bind('click', clickEvent);
      $('.remove_event').bind('click', function (event) {
        $('.click_me').unbind('click', clickEvent);
      });
      $('.trigger_event').bind('click', function (event) {
        $('.click_me').trigger('click');
      });
    })
  </script>

<button class="click_me">click me</button>
<button class="remove_event">unbind</button>
<button class="trigger_event">trigger</button>

예제2

(1)

<script>
    function clickEvent(event) {
      alert('안녕하세요');
    }
    $(document).ready(function () {
      $('.click_me').click(clickEvent);
      $('.remove_event').click(function (event) {
        $('.click_me').unbind('click', clickEvent);
      });
      $('.trigger_event').click(function (event) {
        $('.click_me').trigger('click');
      });
    })
 </script>

<button class="click_me">click me</button>
<button class="remove_event">unbind</button>
<button class="trigger_event">trigger</button>

(2) on/off 사용

<script>
    function clickEvent(event) {
      alert('안녕하세요');
    }
    $(document).ready(function () {
      $('.click_me').on('click', clickEvent);
      $('.remove_event').on('click', function (event) {
        $('.click_me').off('click', clickEvent);
      });
      $('.trigger_event').on('click', function (event) {
        $('.click_me').trigger('click');

      });
    })
</script>

<button class="click_me">click me</button>
<button class="remove_event">unbind</button>
<button class="trigger_event">trigger</button>