제이쿼리 Events

안녕하세요 🐸

제이쿼리 카테고리 Events 에 대해 일부 정리하고자 합니다.

제이쿼리에서는 다양한 이벤트 바인딩 함수를 제공하고 있습니다.
그리고 함수의 사용 용법에 따라 조금씩 차이를 가지고 있기 때문에 이를 확실히 아는 것이 중요합니다.

각각의 이벤트 유형에 따른 바인딩 함수들이 존재하며 각각의 사용법은 on() 과 다르지 않습니다.
그래서 주로 사용하는 함수들에 대해 정리해보겠습니다.

---

on()

요소에 이벤트 핸들러를 추가합니다.

.on(events[,selector][,data],handler)

• events
  • 사용할 이벤트 유형 예시) click, change, keyup
• selector (String)
  • 이벤트가 동작할 요소
• data (Object)
  • 이벤트가 트리거 될 때 핸들러에 전달할 데이터
• handler (function)
  • 이벤트가 트리거 될 때 동작할 이벤트 핸들러

각각의 파라미터가 언제 사용되는지는 아래에서 중간중간 설명하겠습니다.

사용 방법

기본 사용 방법

$('#button').on('click',(e)=>{/*이벤트 로직*/})

이벤트 유형과 핸들러만 사용하는 기본 예제입니다.
id의 값이 button 인 요소에 onClick 이벤트 핸들러를 바인딩 합니다.

이벤트 위임 방식

이벤트 바인딩의 주체를 기준으로 하여 직접 바인딩과 이벤트 위임으로 구분할 수 있습니다.
이 때 사용하는 파라미터가 [, selector] 입니다.

1. 직접 바인딩

$('#table tr').on('click',(e)=>{/*이벤트 로직*/})

2. 이벤트 위임

$('#table').on('click','tr',(e)=>{/*이벤트 로직*/})

비교

1. 직접 바인딩

• #table 의 하위에 있는 tr에 직접적으로 이벤트 핸들러를 바인딩
• tr 태그가 이벤트를 감지

2. 이벤트 위임

• table에 이벤트 핸들러를 바인딩
• #table 이 이벤트를 감지하고 tr 인지를 검증 후 이벤트 동작

위의 예제를 기준으로 표로 정리

	직접 바인딩	이벤트 위임
바인딩 대상	tr	table
새로운 요소	동작 X	동작 O
동작 방식	tr이 click 이벤트를 감지	table이 click 이벤트를 감지 후에 tr 인지 확인 후에 동작

data 사용 방법

data 파라미터를 전달하면 이벤트 핸들러는 .data 속성에서 해당 데이터를 사용할 수 있습니다.

예시 코드

$('#button1').on('click',{username:'ted'},(e)=>{
	console.log(e.data.username); // ted 출력
})
$('#button2').on('click',{username:'jone'},(e)=>{
	console.log(e.data.username); // jone 출력
})
$('#button3').on('click',{username:'jane'},(e)=>{
	console.log(e.data.username); // jane 출력
})

이벤트 위임 + data 사용

앞선 방법을 전부 사용하는 예시 입니다.

$('#table').on('click','tr',{username:'bob'},(e)=>{
	console.log(e.data.username); // #table 의 tr 요소를 클릭시 bob 출력
})

여기서 selector 와 data의 타입을 주의합니다.

주의 사항

이미 바인딩 되어있는 이벤트에 핸들러를 추가할 경우 이벤트는 중첩됩니다.
새로운 핸들러가 값을 교체하는 것이 아니라 계속 새로운 핸들러가 추가됩니다.
그렇기 때문에 이벤트 핸들러를 바인딩 하는 경우에는 코드를 잘 분석하여 이벤트 핸들러가 중첩이 되어서 안되는지를 잘 파악해야합니다.

---

off()

이벤트 핸들러를 제거합니다.

.off( events [, selector ] [, handler ] )

• events
  • 제거할 이벤트 유형
• selector
  • on() 에서 위임한 이벤트 대상
• handler
  • 이벤트 핸들러

사용 방법

모든 이벤트 제거

$('#button').off();

특정 이벤트 유형 제거

$('#button').off('click');

이벤트 위임 제거

$('#table').off('click','tr');

특정 이벤트 핸들러 제거

const func = (e) => {/**/};
$('#table').off('click',func);

이처럼 특정한 이벤트 핸들러를 제거 하기 위해서는 이벤트 핸들러를 함수로 선언하던가 익명함수로써 변수에 할당해야합니다.

이벤트 위임의 특정 이벤트 제거

const func = (e) => {/**/};
$('#table').off('click','tr',func);

---

one()

한번만 수행되고 언바인드될 이벤트 핸들링을 추가합니다.

.one( events [, selector ] [, data ], handler )

• events
  • 추가할 이벤트 유형
• selector
  • 이벤트가 동작할 요소
• data
  • 이벤트가 트리거 될 때 핸들러에 전달할 데이터
• handler
  • 이벤트가 트리거 될 때 동작할 이벤트 핸들러

사용방법

기본 사용 방법

$('#button').one('click',(e)=>{/*이벤트 로직*/})

#button 에 대한 click 이벤트가 1번만 실행되고 이벤트 핸들러는 언바인딩 됩니다.

이벤트 위임

$('#table').one('click','tr',(e)=>{/*이벤트 로직*/})

⚠️ 주의 사항 각 요소별로 하나씩 이벤트 핸들링이 바인딩 되는 것이 아닙니다.
이벤트 핸들러는 #table 에 바인딩이 되었기 때문에 #table 내의 tr 태그 에서 한번이라도 이벤트가 수행되었다면 이벤트 핸들러는 언바인딩 됩니다.

data 사용

$('#table').one('click',{age:80},(e)=>{
	console.log(e.data.age); // 80 출력;
})

이벤트 위임 + data 사용

$('#table').one('click','tr',{gender:'male'},(e)=>{
	console.log(e.data.gender); // male 출력;
})

---

ready()

DOM 이 준비되면 실행합니다.

.ready( handler )

사용 방법

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

위의 사용 방법은 전부 유효합니다. 하지만 첫 번째 예시를 권장합니다.
공식 문서에서도 이를 권장하고 있으며 나머지 사용 방법에 대해서는 deprecated 되었기 때문입니다.
무엇보다도 ready() 함수는 img 같은 인자를 사용하더라도 무조건 document 를 대상으로 하기 때문에 4번째 예시에 있는 img 는 무의미합니다.

---

참조 : https://api.jquery.com/category/events/