자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 02:56
jQuery의 `.on()` 메서드
jQuery의 `.on()` 메서드는 이벤트를 바인딩하는 데 사용됩니다. 이 메서드는 `.bind()`, `.live()`, `.delegate()` 메서드의 기능을 모두 포함하므로, `.on()` 메서드는 가장 권장되는 방법입니다.
# `.on()` 메서드의 기본 형식
- `selector` : 이벤트가 발생할 엘리먼트를 선택하는 선택자입니다.
- `event` : 이벤트 이름입니다. 예를 들어, `click`, `hover`, `submit` 등이 있습니다.
- `handler` : 이벤트가 발생했을 때 호출할 함수입니다.
# `.on()` 메서드의 다양한 형식
`.on()` 메서드는 다양한 형식을 지원합니다.
- 이벤트 바인딩
- 이벤트 바인딩 (멀티 이벤트)
- 이벤트 바인딩 (멀티 이벤트, 데이터 전달)
- 이벤트 바인딩 (멀티 이벤트, 데이터 전달, 전역)
- 이벤트 해제
# `.on()` 메서드의 예제
# `.on()` 메서드의 소스 코드
`.on()` 메서드는 jQuery의 내부에서 다음과 같이 구현됩니다.
이 소스 코드는 `.on()` 메서드의 기본 형식을 보여줍니다. `.on()` 메서드는 다양한 형식을 지원하므로, 이 예제는 단순한 형태입니다.
이벤트 바인딩: jQuery의 .on() 메서드
- 나우호스팅 21일 전 2025.02.22 02:56
-
13
0
jquery .on() jQuery의 `.on()` 메서드
jQuery의 `.on()` 메서드는 이벤트를 바인딩하는 데 사용됩니다. 이 메서드는 `.bind()`, `.live()`, `.delegate()` 메서드의 기능을 모두 포함하므로, `.on()` 메서드는 가장 권장되는 방법입니다.
# `.on()` 메서드의 기본 형식
#hostingforum.kr
javascript
$(selector).on(event, handler);
- `selector` : 이벤트가 발생할 엘리먼트를 선택하는 선택자입니다.
- `event` : 이벤트 이름입니다. 예를 들어, `click`, `hover`, `submit` 등이 있습니다.
- `handler` : 이벤트가 발생했을 때 호출할 함수입니다.
# `.on()` 메서드의 다양한 형식
`.on()` 메서드는 다양한 형식을 지원합니다.
- 이벤트 바인딩
#hostingforum.kr
javascript
$(selector).on(event, handler);
- 이벤트 바인딩 (멀티 이벤트)
#hostingforum.kr
javascript
$(selector).on(events, handler);
- 이벤트 바인딩 (멀티 이벤트, 데이터 전달)
#hostingforum.kr
javascript
$(selector).on(events, handler, data);
- 이벤트 바인딩 (멀티 이벤트, 데이터 전달, 전역)
#hostingforum.kr
javascript
$(document).on(events, selector, handler, data);
- 이벤트 해제
#hostingforum.kr
javascript
$(selector).off(event, handler);
# `.on()` 메서드의 예제
#hostingforum.kr
javascript
// 이벤트 바인딩
$("button").on("click", function() {
alert("버튼이 클릭되었습니다.");
});
// 이벤트 바인딩 (멀티 이벤트)
$("button").on("click hover", function() {
alert("버튼이 클릭되거나 마우스가 올라갔습니다.");
});
// 이벤트 바인딩 (멀티 이벤트, 데이터 전달)
$("button").on("click hover", function(event, data) {
alert("버튼이 클릭되거나 마우스가 올라갔습니다. 데이터: " + data);
});
// 이벤트 바인딩 (멀티 이벤트, 데이터 전달, 전역)
$(document).on("click hover", "button", function(event, data) {
alert("버튼이 클릭되거나 마우스가 올라갔습니다. 데이터: " + data);
});
// 이벤트 해제
$("button").off("click");
# `.on()` 메서드의 소스 코드
`.on()` 메서드는 jQuery의 내부에서 다음과 같이 구현됩니다.
#hostingforum.kr
javascript
on: function( types, selector, data, delegateTarget, eventHandle ) {
var elem, i, match, ret, type, uuid, handlers, handle, newHandle;
// 원본 소스코드는 더 복잡하지만, 이 예제는 간단한 형태입니다.
if (typeof types === "object") {
// 여러 이벤트를 한번에 바인딩하는 경우
for (type in types) {
// 이벤트를 하나씩 바인딩합니다.
on( type, selector, data, delegateTarget, eventHandle );
}
} else {
// 단일 이벤트를 바인딩하는 경우
elem = delegateTarget || this;
if (elem.nodeType === 3) return; // 텍스트 노드는 이벤트를 바인딩할 수 없습니다.
if (elem.nodeType !== 1 && elem.nodeType !== 9) return; // 엘리먼트 또는 문서 노드만 이벤트를 바인딩할 수 있습니다.
// 이벤트를 바인딩합니다.
ret = on.call(elem, types, selector, data, eventHandle);
}
return ret;
},
이 소스 코드는 `.on()` 메서드의 기본 형식을 보여줍니다. `.on()` 메서드는 다양한 형식을 지원하므로, 이 예제는 단순한 형태입니다.
댓글목록
등록된 댓글이 없습니다.