JQuery는 크로스 브라우징을 자동으로 처리해주고 , 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다.
- 예제 > 실행 화면 링크 <
<input type="button" id="original" value="original" />
<input type="button" id="jquery" value="jQuery" />
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
// 순수하게 구현했을 때
var target = document.getElementById('original');
if(target.addEventListener){
target.addEventListener('click', function(event){
alert('original');
});
} else {
target.attachEvent('onclick', function(event){
alert('original');
});
}
// jQuery를 사용했을 때
$('#jquery').on('click', function(event){
alert('jQuery');
})
</script>on API
* JQuery 이벤트 API
1. 기본 문법
.on( events [, selector ] [, data ], handler(eventObject) )
- event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
- selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함. 생략가능하다.
- data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
- handler : 이벤트 핸들러 함수
2. 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-3.1.0.min.js"></script> <script> $('ul').on('click','a, li', function(event){ //ul의 엘리먼트를 클릭했을 때, <a>와<li>에 클릭 이벤트를 설치한 것 처럼 동작 alert(this.tagName); }) </script>
* a태그와 li태그에 대해서만 이벤트가 발생할 뿐 ul 태그에는 이벤트가 발생하지 않는다.
3. late binding
* 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있다.
- 예제 1
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('ul').on('click','a, li', function(event){ alert(this.tagName); }) </script> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul>
* 위의 코드는 ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문에 실행되지 않는다.
- 예제 2
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('body').on('click','a, li', function(event){
alert(this.tagName);
})
</script>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</body>
* 위의 코드처럼 body 태그를 선택하면 이미 존재하는 엘리먼트에 이벤트를 설치하는 것이기 때문에
나중에 엘리먼트가 추가되도 이벤트를 사용할 수 있다.
3. 다중 바인딩
* 하나의 엘리먼트에 복수개의 이벤트
<input type="text" id="text" /> <p id="status"></p> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('#text').on('focus blur', function(e){ // Focus와 Blur 이벤트 설치, 인자로 전달되는 프로퍼티 중 $('#status').html(e.type); //타입 프로퍼티의 값이 추가 }) </script>
- 결과
* 이벤트에 따라 다르게 동작하고 싶다면
<input type="text" id="text" /> <p id="status"></p> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('#target').on({ 'focus' : function(e){ $('#status').html(e.type); }, 'blur' : function(e){ $('#status').html(e.type); } }) </script> </script>
- 결과
4. 이벤트 제거
* off를 사용한다.
- 예제
<input type="text" id="text"></textarea>
<input id="remove" type="button" value="remove" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
var handler = function(e){
$('#status').text(e.type+Math.random());
};
$('#text').on('focus blur', handler)
$('#remove').on('click' , function(e){
$('#text').off('focus blur', handler);
document.write(32);
})
</script>