[jQuery][국비교육] Day 50

🔍 jQuery 이벤트

이벤트 처리 코드를 등록/해제하는 API 함수가 쌍으로 존재함

❗ deprecated / 삭제됨

• bind - unbind
• live - die
• delegate - undelegate
• load - unload

➰ 이벤트 리스너를 등록하는 API 함수

on, one 👉🏻 사용 방법이 같음

• on은 이벤트 발생시 반영구적으로 반응 👉🏻 반복적 실행
• one은 이벤트 발생시 한 번만 반응 👉🏻 1회 실행 후 알아서 해지됨

//객체에 이벤트 리스너 등록
$(객체).on("이벤트 이름", function() {
})

//객체에 이벤트 리스너를 등록하지만, 실행은 자손들 중에서 셀렉터를 만족하는 요소에서 실행함
$(객체).on("이벤트이름", "셀렉터", function() {

})

//여러 종류의 이벤트 리스너를 한꺼번에 등록
$(객체).on({
  	"이벤트명": function
  , "이벤트명":function
  , ...
})

➰ 이벤트 리스너를 해제하는 API 함수

off

• 이벤트 리스너를 해제 👉🏻 on, one 둘 다 해제할 수 있음

//지정된 이벤트의 리스너 해제
$(객체).off("이벤트이름")

//등록된 모든 이벤트 리스너 해제
$(객체).off()

//부모객체에 등록된 자손 중 셀렉터에 동적으로 반응하는 이벤트 리스너 해제
$(부모객체).off("이벤트이름", "셀렉터")

➰ 이벤트 리스너를 등록하는 축약함수

$(객체).이벤트명(function() {

})

$("#myDiv").on("click", function() {
})
			👇🏻
$("#myDiv").click(function() {
})

➰ 이벤트를 임의로 발생시키는 함수

$(객체).trigger("이벤트명")

$("#myDiv").trigger("click")
//	➡ #myDiv에 클릭이벤트가 발생

✔ 매개변수 없이 이벤트명을 이용한 함수를 호출하면 trigger함수의 축약코드가 됨

$("myDiv").trigger("click")
		👇🏻
$("#myDiv").click()