티스토리 뷰
See the Pen [jQuery] 실행 시점 제어하기 by mill (@millfeel) on CodePen.
on() 메서드
$('선택자').on('이벤트종류', 이벤트핸들러);
*예전에는 bind() 메서드를 사용했는데 현재는 더 이상 사용되지 않는다.
[JS와 비교]
document.querySelector('선택자').addEventListener('이벤트종류', 이벤트핸들러);
메서드 체인
$('선택자').메서드A().메서드B().메서드C();
메서드를 체인처럼 연결해서 작성하고 실행하는 프로그램 방법
[장점]
- 함수를 한번만 작성해도 되므로 코드를 단순화
- 프로그램의 처리 속도 향상
$(function () {
$('.box').on('mouseover', mouseOverEve);
$('.box').on('mouseout', mouseOutEve);
// 위의 코드를 아래의 코드처럼 연결해서 사용할 수 있다.
$('.box').on('mouseover', mouseOverEve).on('mouseout', mouseOutEve);
// 이렇게 코드를 연결한 것을 메서드 체인이라고 한다.
});
.on() 메서드를 생략하고, 이벤트 종류로 실행하는 방법
$(function () {
$('선택자').이벤트종류(이벤트핸들러);
});
그룹 선택자를 사용해서, 선택한 대상에게만 이벤트 적용시키는 방법
$('선택자, 선택자').이벤트 종류(function () {
$(this).css({속성 : '값'});
});
이벤트 종류
See the Pen [jQuery] 이벤트 종류 by mill (@millfeel) on CodePen.
- $(window)는 브라우저를 선택한다.
- .text()는 특정 선택자 안의 텍스트 내용을 변경한다.
[공부좌표]
'이론 > jQuery' 카테고리의 다른 글
[jQuery] 선택자의 순서 값을 찾아주는 .index() 메서드 (0) | 2021.10.23 |
---|---|
[jQuery] 애니메이션 .stop() .animate() (0) | 2021.10.23 |
[jQuery] 탐색 구문 .children() .parent() .find() .eq() 등 (0) | 2021.10.22 |
[jQuery] HTML에서 선택한 요소의 속성 변경하는 방법 .attr() (0) | 2021.10.22 |
[jQuery/제이쿼리] on() / off() / trigger() (0) | 2021.10.13 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- scrollTop
- innerHeight
- 부등 연산자
- javascript class
- 불일치 연산자
- offsetTop
- [[Prototype]]
- 프로퍼티
- clientHeight
- 동치 연산자
- @font-face
- 동등 연산자
- 대괄포 표기법
- 점 표기법
- 일치 연산자
- 객체의 프로퍼티
- offsetHeight
- 링크막기 #a링크막기
- property
- constructor
- clinetTop
- prototype 프로퍼티
- outerHeight
- scrollHeight
- __proto__
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함