[jQuery - 기능 - (2) ] $.on() → event bind ( 1.7 ver.) : 이벤트 설정
$.on()
jQuery on 함수는 1.7버전부터 추가 되었다. 앞으로 이벤트를 바인드 하려면 on 함수를 쓰는것이 좋아보인다. 기존에 있던 bind, live, delegate등의 함수들이 없어질 예정이니 on을 쓰도록 한다. 물론 click 함수는 on 함수의 숏컷 모양으로 남아있다.
기본형식
|
1
2
3
4
|
$(selector).on(eventType, function(){
// ...something
});
Color Scripter
|
기본 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$("#a2").on("click", function(){
alert("문장이 클릭되었습니다.");
});
});
$(function() {
$("p").on("click", function(){
alert("클릭이 되었습니다.");
});
});
</script>
</head>
<body>
<h1>.on()</h1>
<p>이 문장을 클릭해 주세요.</p>
<span id="a2">두 번째 문장을 클릭해주세요</span>
</body>
</html>
Color Scripter
|
코드 결과 : https://www.w3schools.com/code/tryit.asp?filename=G6D1X2E4LEH1
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
| [jQuery - 기능 - (5) ] $.validate() - (1) : 유효성 검사 [ 확인 문구 바로 출력 ] (0) | 2019.08.12 |
|---|---|
| [jQuery - 기능 - (4) ] $.each() → 반복 함수 (0) | 2019.08.12 |
| [jQuery - 기능 - (3) ] $.var() → value load : 값 추출(로드) (0) | 2019.08.12 |
| [jQuery - 기능 - (1) ] $.ready() = $(document).ready(function(){ }) (0) | 2019.08.12 |
| [CSS] ::before ::after은 무엇인가? (0) | 2019.08.03 |
| [JavaScript - (8) ] document.getElementById( ) - 자바스크립트 id 접근 (0) | 2019.07.30 |
| [jQuery - 기본 - (1) ] jQuery 소개 및 기본적인 값 추출 방법 (0) | 2019.07.26 |