생활 웹디자인

event

토픽 생활 웹디자인 > 인터렉션 > jQuary

이벤트란?

  • 시스템에서 일어나는 사건을 의미
  • 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. labis98
    20210922 좋은 강의 감사합니다.
  2. 없으면안돼요
    수강완료... 감사합니다
  3. 허공
    감사합니다!
  4. dkfkanl2@gmail.com
    function(e) 란

    event관련 object를 받는 argument입니다.


    적절한 사용예시)

    $('#myTable').click(function(e) {
    var clicked = $(e.target);
    clicked.css('background', 'red');
    });

    console.log(e) 를 하면 '다음' 과 내용을 확인하실 수 있는데요,

    아래 내용에서 필요한 게 있을때 쓴다고 생각하시고 예제는 e 를 쓴것과 안쓴것에 차이가 없지만,

    e 를 써야할때 쓰지 않은 경우 모든 동작에 반응하는 이벤트가 될 수 있다고 보시면 되겠습니다.



    -다음-

    [ console.log(e) 결과 ]

    altKey: false
    attrChange: undefined
    attrName: undefined
    bubbles: true
    button: 0
    cancelable: true
    charCode: undefined
    clientX: 30
    clientY: 19
    ctrlKey: false
    currentTarget: input#click_me
    data: undefined
    detail: 1
    eventPhase: 3
    fromElement: null
    handleObj: {selector: "#trigger_event", handler: ƒ, origType: "click", origHandler: ƒ, preType: "click", …}
    handler: ƒ M(a)
    isDefaultPrevented: ƒ D()
    jQuery16205920958544736974: true
    keyCode: undefined
    layerX: 30
    layerY: 19
    liveFired: document
    metaKey: false
    newValue: undefined
    offsetX: 20
    offsetY: 7
    originalEvent: MouseEvent {isTrusted: true, screenX: 1950, screenY: 125, clientX: 30, clientY: 19, …}
    pageX: 30
    pageY: 19
    prevValue: undefined
    relatedNode: undefined
    relatedTarget: null
    screenX: 1950
    screenY: 125
    shiftKey: false
    srcElement: input#click_me
    target: input#click_me
    timeStamp: 1560184150214
    toElement: input#click_me
    type: "click"
    view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    wheelDelta: undefined
    which: 1
    __proto__: Object
    대화보기
    • 이채
      가장 최근 버전으로 실행해봤는데 안 되길래 버전을 낮춰서 실행했더니 작동하네요.
      찾아보니 3.xx부터는 bind() 기능을 제공하지 않는다고 합니다.
      (1.0 ~ 1.7 이하 버전 : bind() /
      1.7 ~ 3.0 미만 버전 : bind(), on() 모두 사용 가능
      이상 최신 버전 : on() )
    • Yoon Joon Lee
      예제 1 & 3이 실행이 안됩니다.
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      3.2.1 버전이라서 그런가요?
    • 웅이
      답글을 봐도 이해가가지않습니다 ㅠㅠ 누가 더 쉽게 설명해주실수있나요 ㅠㅠ?
      대화보기
      • 삼고잉
        제이쿼리에서 시스템은 브라우저고 이벤트 설치 제거 호출할 수 있는데 버전에따라 문법은 같지만 용어는 달라졌다!
      • 왜 안되는거죠?
        왜 제이쿼리 cdn방식으로 예제1을 적용하면 되는데
        다운로드 받은상태로 진행하면 예제1 alert()가 실행이 안되는건가요?
      • 피자
        예제1에 최신 CDN을 붙여놓고 실행해봤는데, 실행이 안되는 이유가 뭘까요?
      • Sungwoong Pyeon
        감사합니다 잘봤습니다. 첫번째 예제에서 bind 와 unbind를 on 과 off로 대체 해서 써봅니다.
        틀린부분이있으면 댓글 달아 주세요.
        $(document).ready(function(){
        $('#click_me').on('click', clickHandler);
        $('#remove_event').on('click', function(e){
        $('#click_me').off('click', clickHandler);
        });
        $('#trigger_event').on('click', function(e){
        $('#click_me').on('click', clickHandler);
        });
        })
      • sheis
        잘 봤어요^^
      • crable
        감사합니다.
        현재 .live() 는 Deprecated 되었네요.

        참고 : http://api.jquery.com......%29
      • 초보개발자
        잘봤습니다 ㅎㅎ
      • 완료!
        완료! 감사합니다~
      • 나도 열공
        그러니까 그 버튼을 어떻게 만드나요?
        대화보기
        • 열공중!
          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...