[jQuery] 실행 시점 제어하기 .on()

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 03 [ 이벤트] jQuery 이벤트, 실행 시점 제어, 메서드 체인, 이벤트의 종류