기본 사용법
on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자.
on의 기본적인 문법
.on ( event [, selector ] [, data], handler(eventObject) )
- event: 등록하고자 하는 이벤트 타입을 지정한다. ex) click
- selector: 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링한다.
- data: 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정한다.
- handler: 이벤트 핸들러 함수
on 사용 예시
|
1
2
3
4
5
6
7
8
9
|
<body>
<input type="button" id="jquery" value="jQuery" />
<script src="jquery-3.7.1.js"></script>
<script>
$('#jquery').on('click', function(event){
alert('jQuery');
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
selector
- on API의 두 번째 인자
- 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<script src="jquery-3.7.1.js"></script>
<script>
$('ul').on('click', 'a, li', function(event){
alert(this.tagName);
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에 a, li 엘리먼트들에 대해서만 이벤트가 발생한다. 주의할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다. 이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.
Late Binding
jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 기능을 제공한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<script src="jquery-3.7.1.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>
</body>
|
cs |
위의 코드는 실행되지 않는다. ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문이다. 존재하지 않는 엘리먼트에 이벤트를 달 수 없다. 그런데 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<script src="jquery-3.7.1.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>
|
cs |
jQuery문의 ul을 body로 바꿨다.
body엘리먼트는 이미 존재하고 있기 때문에 이벤트 설치가 가능하다. body 엘리먼트의 하위 엘리먼트가 나중에 추가되더라도 그 엘리먼트들에 대한 이벤트를 설치해서 사용할 수 있다.
다중 바인딩
하나의 엘리먼트에 여러 개의 이벤트 타입을 동시에 등록하는 방법을 알아보자.
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<input type="text" id="target">
<p id="status"></p>
<script src="jquery-3.7.1.js"></script>
<script>
$('#target').on('focus blur', function(e){
$('#status').html(e.type);
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
한 번에 focus와 blur라는 두 개의 이벤트 타입을 선택했다. 만약 이벤트에 따라서 다른 핸들러를 실행하고 싶으면 아래와 같이 코드를 변경하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<body>
<input type="text" id="target">
<p id="status"></p>
<script src="jquery-3.7.1.js"></script>
<script>
let handler1 = function(e){
$('#status').html(e.type);
}
let handler2 = function(e){
alert(e.type);
}
$('#target').on('focus', handler1).on('blur', handler2);
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
이벤트 제거
이벤트를 제거할 때는 off를 사용한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body>
<input type="text" id="target" />
<input type="button" id="remove" value="remove" />
<p id="status"></p>
<script src="jquery-3.7.1.js"></script>
<script>
let handler = function(e){
$('#status').html(e.type + Math.random());
};
$('#target').on('focus blur', handler);
$('#remove').on('click', function(e){
$('#target').off('focus');
})
</script>
</body>
|
cs |
id값이 target인 input text에 사용자가 focus와 blur를 하면 [이벤트 타입+랜덤한 숫자]가 뜨게 만들었다.
여기서 focus에 대한 이벤트를 제거하고 싶다면 off('focus')를 사용하면 된다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.