반응형
jQuery on API 사용법
- on은 jQuery에서 가장 중요한 이벤트 API이다.
- 또 순순 자바스크립트와 코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해주기 때문이다.
on의 기본적인 문법.
.on( events [, selector ] [, data ], handler(eventObject) )
- event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
- selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
- data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
- handler : 이벤트 핸들러 함수
selector
selector 파라미터는 이벤트 대상을 필터링한다.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>- 위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에 a, li 엘리먼트들에 대해서만 이벤트가 발생한다.
- 주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다.
- 이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.
late binding
jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 놀라운 기능을 제공한다.
아래 코드는 실행되지 않는데 왜냐하면 존재하고 있는 ul 엘리먼트 위에서 이벤트 설치를 시도하고 있을 때 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>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
하지만 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다.
$의 인자에 'ul'대신 'body'을 넣어주어 body 태그 안을 전체적으로 포괄시켜 body 태그 안에 들어있는 ul을 존재하도록 설정할 수 있게 된다.
↓
<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>.on의 첫 번째 인자로 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' : 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>
remove 버튼을 누르면 focus, blur 이벤트 효과가 사라진다.
반응형
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| Javascript 네트워크 통신 - JSON (0) | 2020.11.27 |
|---|---|
| Javascript 네트워크 통신 - Ajax (0) | 2020.11.27 |
| Javascript 이벤트 타입 - 마우스 (0) | 2020.11.26 |
| Javascript 이벤트 타입 - 문서 로딩 (0) | 2020.11.26 |
| Javascript 이벤트 타입 - 폼(form) (0) | 2020.11.26 |
댓글