on API 사용법

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 

---

 기본 사용법 

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 엘리먼트들에 대해서만 이벤트가 발생한다.

따라서, 위 소스에서 this는 a를 누르면 a가 되고 li를 누르면 li가 된다.

 

주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다.

---

 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는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다. 

---

해결 방안은 ul을 body로 바꾸면 된다.

이미 존재하고 있는 body 엘리먼트에 이벤트를 설치하면, 사용이 가능하다.

<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>

---

 다중 바인딩 

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

아래 코드는 focus와 blur의 공백을 둬서 동시에 등록한다.

<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>

 

또는 체이닝을 이용해서 아래와 같이 코딩할 수 있다.

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

</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>