jQuery 수업

event

이벤트란?

  • 시스템에서 일어나는 사건을 의미
  • javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
  • 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
  • 이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49

jQuery의 이벤트

  • 크로스브라우징의 문제를 해결해줌
  • bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)
  • trigger로 이벤트 핸들러를 강제로 실행 (예제2)
  • click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
  • live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음

예제1. bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            function clickHandler(e){
                alert('thank you');
            }
            $(document).bind('ready', function(){
                 $('#click_me').bind('click', clickHandler);
                 $('#remove_event').bind('click', function(e){
                     $('#click_me').unbind('click', clickHandler);
                 });
                 $('#trigger_event').bind('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>

예제2. 이벤트 헬퍼

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            function clickHandler(e){
                alert('thank you');
            }
            $(document).ready(function(){
                 $('#click_me').click(clickHandler);
                 $('#remove_event').click(function(e){
                     $('#click_me').unbind('click', clickHandler);
                 });
                 $('#trigger_event').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>

예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            function clickHandler(e) {
                alert('thank you');
            }
            $('#click_me').live('click', clickHandler);
            $('#remove_event').live('click', function(e) {
                $('#click_me').die('click', clickHandler);
            });
            $('#trigger_event').live('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>

 

댓글

댓글 본문
작성자
비밀번호
  1. 초보개발자
    잘봤습니다 ㅎㅎ
  2. 완료!
    완료! 감사합니다~
  3. 나도 열공
    그러니까 그 버튼을 어떻게 만드나요?
    대화보기
    • 열공중!
      mkc님 일단 전체 function은 ready를 통해 구동되고 있으므로 최초 로딩시 1번 수행됩니다.
      이후 버튼들에 기능이 생기는데요, unbind로 click_me와 clickHandler 함수와의 연계를 끊어놓았으므로
      리로딩을 하지 않는 한 첫번째 버튼은 작동하지 않습니다.
      굳이 작동하게 만들고 싶다면,
      click_me와 clickHandler를 연결시키는 버튼을 하나 더 만들면 됩니다.
    • 좋은 강의로 정말 새로운 경험을 하고 있습니다.
      궁금한 점이 있습니다.

      $('#click_me').bind('click', clickHandler);
      $('#remove_event').bind('click', function(e){
      $('#click_me').unbind('click', clickHandler);

      3번째 줄에서 버튼을 클릭하면 이벤트를 지우고 첫줄에서는 이벤트를 설치 하는데...
      1. unbind된 이벤트는 다시 살아나지 않는 건가요?
      2. 다시 살려낼 수 있는 방법이 있을까요?

      저는 on/off스위치 처럼 켜고 끌 수 있을거라 생각했는데... 그게 아닌가 보네요 ㅎㅎ
    • tachyon
      감사합니다!
    • kswooo
      강의를 듣던 중에 소소한 궁금증이 생겨 질문 올려봅니다.
      off (강의 자료에서는 unbind)기능 수행시
      off('click', clickHandler) 대신 off('click')만으로도 동작이 수행되는 것을 확인하였습니다.
      또한 trigger 기능 수행시에도
      trigger('click') 대신 trigger('click', clickHandler)로도 동작이 수행되는 것을 확인하였습니다.

      즉 이전 함수(위의 경우 clickHandler 함수)의 기재여부와는 무관하게
      off(강의 자료에서는 unbind)기능과 trigger기능이 수행됨을 확인하였는데,
      실제로 다양한 명령어와 함께 사용될 때, 문제가 발생될 수도 있는것인지
      아니면 그 어떤 경우에도 이전 함수(위의 경우 clickHandler 함수)의 기재여부와 무관하게
      적용 가능한 것인지 궁금합니다.

      좋은 강의 감사합니다.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • JustStudy
      고맙습니다
    • 아 잘못 생각했네요. 선택된게 body가 아니라 document 자체였군요 document 의 ready가 불리려면 문서 로드가 끝난 시점이라 괜찮겠네요.
    • 예제1의

      $(document).bind('ready', function(){

      bind는 제이쿼리 스크립트보다 돔엘리먼트 로드가 선행되지 않았으니
      이벤트 설치가 되지 않아야 정상 아닌가요?
      bind 대신 on을 사용해야 할 것 같은데 제가 잘못 이해한것입니까?
    • 유기농브래드
      감사히 잘 보고 있습니다~
    • 참빛바다
      live,die 가 on,off 로 바뀐거군요
    • Limelight
      die()는 off()로 되었군요..
    • 머머
      우주님 말대로 .live() 는 .on()으로 대체되었고, 이번 수업에서 나오는 .bind()도 .on()으로 통합되었다고 합니다
      대화보기
      • 우주
        'jQuery 1.7이후 부터는 live()함수를 사용하지 않고 .on()으로 대체되었다'
        고 하네요.
      • 자유로운푸른곰
        아~ 정말 이해가 쏙쏙되네요 ^^
      • arar
        저도 궁금했어요 감사합니다!
        대화보기
        • 산이야
          http://opentutorials.org/cours...
          연결이 여전히 끊어져 있습니다.
          대화보기
          • 배휘동
            답변 감사합니다! 의문이 풀렸어요.
            p.s. 모바일에서 페이스북 커넥트를 하려니까 오류가 발생합니다. oauth 오류인지...
            대화보기
            • egoing
              좋은 질문입니다. console.log(e)을 로직에 넣어보시고, 구글 크롬 개발자 도구와 같은 것으로 로그를 출력해보면 e가 event 객체로 넘어온다는 것을 알 수 있습니다. 자바스크립트에서 이벤트 함수는 callback라는 방식으로 어떤 이벤트가 발생했을 때 시스템에 의해서 호출되게 되어 있는데 이 함수의 첫번째 인자값으로 이벤트 객체를 받게 되어 있습니다. 그리고 이 이벤트 객체는 이벤트가 발생한 상황의 다양한 맥락을 담고 있어서 이걸 이용하게 됩니다. 예제 코드에서는 e라는 인자를 받지 않아도 됩니다만 관습적으로 사용하고 있는 것 뿐입니다.
              대화보기
              • Hwidong Bae
                어쩌면 기초적인 javascript 질문일 수도 있는데요...
                예제들에서 사용한 익명함수 function(e)에서 e가 사용되지 않는데 왜 파라미터로 넘겨주는 것이죠?
                $(document).bind('ready', function(){
                $('#click_me').bind('click', clickHandler);
                $('#remove_event').bind('click', function(e){
                document bind에서는 파라미터 없이 function()이고, 나머지는 전부 function(e)네요.
                소스 코드에서 e를 지워봐도 잘 작동하니까 더 모르겠습니다.
              • egoing
                수정 했습니다. 고맙습니다 :)
                대화보기
                • oneslife
                  강의 잘 듣고 있습니다.. 아래 링크가 끊어진것 같습니다..
                  http://opentutorials.org/javas...
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기