웹브라우저 JavaScript

on API 사용법

기본 사용법

on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자.

on의 기본적인 문법은 아래와 같다.

.on( events [, selector ] [, data ], handler(eventObject) )
  • event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
  • selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
  • data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
  • handler : 이벤트 핸들러 함수

selector

selector 파라미터는 이벤트 대상을 필터링한다. 아래 예제를 보자.

<ul>
	<li><a href="#">HTML</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">JavaScript</a></li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('ul').on('click','a, li', function(event){
		console.log(this.tagName);
	})
</script>

실행결과

A
LI

위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에  a, li 엘리먼트들에 대해서만 이벤트가 발생한다. 주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다. 이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.

late binding

jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 놀라운 기능을 제공한다. 아래 코드를 보자. 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('ul').on('click','a, li', function(event){
		console.log(this.tagName);
	})
</script>
<ul>
	<li><a href="#">HTML</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">JavaScript</a></li>
</ul>

위의 코드는 실행되지 않는다. ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문이다. 존재하지 않는 엘리먼트에 이벤트를 달 수 없다는 것은 이미 배운 바가 있다. 그런데 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다. 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('body').on('click','a, li', function(event){
		console.log(this.tagName);
	})
</script>
<ul>
	<li><a href="#">HTML</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">JavaScript</a></li>
</ul>

다중 바인딩

하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법을 알아보자. (실행)

<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#target').on('focus blur', function(e){
		$('#status').html(e.type);
	})
</script>

한번에 여러개의 이벤트 타입을 선택했다. 만약 이벤트에 따라서 다른 핸들러를 실행하고 싶다면 아래와 같이 코드를 변경한다.

<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#target').on({
		'focus' : function(e){

		}, 
		'blur' : function(e){
			
		}
	})
</script>

이벤트 제거

이벤트를 제거할 때는 off를 사용한다. 

<input type="text" id="target"></textarea>
<input id="remove"  type="button" value="remove" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  var handler = function(e){
    $('#status').text(e.type+Math.random());
  };
  $('#target').on('focus blur', handler)
  $('#remove').on('click' , function(e){
    $('#target').off('focus blur', handler);
    console.log(32);
  })
</script>

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다!
  2. 임앤강
    2022-02-18 감사합니다.
  3. tekhnolozy
    제거 파트는 좀 분기가 나눠지네요.
    다들 따로 정리를 해보시는게 좋을듯!
  4. 드림보이
    2022.01.04. Jquery 이벤트 - on API 사용법 파트 수강완료
  5. pmxsg
    2021.12.23 수강
  6. labis98
    20210914 좋은 강의 감사합니다.
  7. anne
    완료
  8. 한강
    On api 감사합니다~~^^!
    200715
  9. Joo.Love.
    사람냄새 나는 이고잉님 최고~^^
  10. 준바이
    감사합니다
  11. 굼벵이
    완료
  12. JuicyFresh
    감사합니다.
  13. pakimchi
    event.target 은 실제 click 된 객체를 항상 표시하기 때문입니다.
    this 는 event.currentTarget으로 핸들러를 호출한 객체를 가리킵니다.
    대화보기
    • 안병희
      selector에서의 예제 코드 중
      console.log(this.tagName);

      console.log(event.target.nodeName);
      로 변경하고 실행해 봤는데요.
      원래 코드와는 다르게 이벤트가 실행된 노드만 2번 출력이 됩니다.
      둘의 차이가 뭔지 알고 싶습니다.
    • 5454
      ㅗㅗㅗㅗ5555
    • 박인호
      1-3
      수강완료.
    • Byungsoo Kim
      감사합니다.
    • illliilllliillliii
      강의 들으면서 갑자기 궁금한 점을 짚어주시니까 너무 좋아요 ㅠㅠ 잘봤습니다!
    • crable
      감사합니다.
    • Byeong Heon Lee
      항상 감사합니다~
    • 신입1
      감사합니다. 동적으로 생성되는 엘리먼트에 이벤트 넣는 방법이 유용하겠네요.
      late binding
    • woong
      3번째 영상 4분 35초즈음 이고잉님 당황하시는거 귀요밐ㅋㅋㅋ 천재도 실수할때가 있군요 ㅋㅋㅋ 잘봤습니다 감사합니다 ^^
    • tachyon
      감사합니다
    • JustStudy
      2016.07.14 목
      고맙습니다 3.
    • JustStudy
      2016.07.03 일
      고맙습니다 2.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 28
      잘보고갑니다.
    • JustStudy
      고맙습니다
    • Bono
      저도 궁금하네요.
      on( events [, selector ] [, data ], handler(eventObject) 를 인식할때
      드는 생각은 컴퓨터는 4개의 파라미터를 순차적으로 확인하고 두번째 인자에서 파라미터를 selector 타입인지, data 타입인지 파라미터의 유형을 확인하고 아니라면 함수(handler)로 인식하는 로직을 가지고 있지 않을까 하는 생각이 드네요.
      대화보기
      • 참빛바다
        다중 바인딩과 late binding 을 동시에 적용하려면 어떻게 해야 할지 궁금합니다.
      • 이제막
        와 ............. 저도 갑자기 궁금해졌네요 그러게요!!
        의문은 그 어떠한 것이라도 좋은거랬어요.
        대화보기
        • 자스입문
          오와 함수의 옵션인자의 생략이 가운데꺼를 생략가능 하네요?
          on( events [, selector ] [, data ], handler(eventObject)
          총 1234 의 인자가 있다고 치면 1,4 를 전달하고 23은 중간에 떼먹고 옵션으로 할수 있다는거 같은데
          어떻게 그렇게 컴퓨터가 인식할수 있는지 쓸데없이 궁금하네요 ㅠㅠ. 컴퓨터는 연속적으로만 인수를 받는걸로 알고있는데 그래서 보통 옵션 인자는 뒤에서 부터 적용하는것만 보다가 중간꺼를 하니까 적응이 ㄷㄷㄷ ㅠㅠ
        • 코딩!
          이벤트 삭제!! 감사합니다
        • quki
          이고잉님 API에서 [, selector ]와 같이 [ (내용) ]의 정확한 의미가 무엇이죠??
          함수의 input parameter로 들어가지 않아도 되는 객체라는 뜻으로 이해해도 되나요?
        • 김우성
          감사합니다 ``
        • T-BONE Steak
          아하 그렇군요.!
          너무 심오하게 생각 했군요 ㅋㅋ
        • egoing
          그냥 변수명 입니다~
          대화보기
          • T-BONE Steak
            function(e) 요부분에서 인자명을 event가 아니라 e 로 사용하는것이 jQuery 에만 해당하는건가요?
          • 찍찍이얌
            다중 바인딩 강의에서 click 이벤트를 실수로 주셨을때 click가 찍여야 하는게 아닌가요? ㅠㅜ

            var handler = function(e){
            $('#status').html(e.type);
            }

            $('#target').on('click', handler).on('blur', handler);
          • 도로시
            jQuery 수업을 듣다가 궁금한 점이 생겨서 다시 돌아와서
            late binding 부분의 예제를('body'로 바꾼 예제) 복사해서 크롬에서 실행했는데 오류가 나네요

            $('body').on('click','a, li', function(event){
            이 부분에 오류가 있다고 메시지가 나오는데..
            문법적으로 틀린 부분은 없는 것 같은데... 크롬이라서인 걸까요?
          • 달배
            아! 알림 뱃지가 달리는군요. 감사합니다 ^^
            대화보기
            • egoing
              자바스크립트 강의는 한두개 정도 더 남았습니다. 그리고 이메일 등으로 발송은 안되고 있고요. 저희 사이트에 로그인해서 방문하시면 사이트 상단의 알림을 통해서 통지를 해드리고 있습니다.
              대화보기
              • 달배
                좋은 강의 정말 감사합니다. 이고잉님은 한국의 Khan Academy의 살만 칸이라는 생각이 듭니다.
                그런데 본 강의가 가장 최근에 업데이트되었던데 이것으로 혹시 자바스크립트 강의는 끝이 났는지요?
                아니면 새 강의가 올라오면 그것을 웹사이트를 매번 체크하지 않고도 알림 받을 수 있는 방법이 있을까요? ^^
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기