jQuery - 이벤트 data 파라미터 사용하기

 

jQuery를 이용해서 이벤트를 등록하면 이벤트 파라미터로 다양한 변수들이 넘어옵니다.

ex) currentTarget, delegateTarget, data 등

그 중 data 변수에 대해서 알아보겠습니다.

 

자바스크립트 클릭 이벤트

const btn = document.getElementById('btn');

btn.addEventListener('click', (e) => {
  console.log('e', e);
});

위와 같이 자바스크립트를 이용해서 이벤트를 등록하면 data는 보이지 않습니다.

자바스크립트로는 PointerEvent라는 객체가 넘어오게 됩니다.

 

jQuery 클릭 이벤트

jQuery를 이용해서 이벤트를 등록해야 data 값이 넘어옵니다.

const $btn = $('#btn');

$btn.on('click', (e) => {
  console.log('jQuery e', e);
});

하지만 현재는 undefined 입니다.

jQuery event data

아래와 같이 이벤트를 등록할때, 두번째 파라미터에 데이터 값을 object 형식으로 넣어줘야 합니다.

const $btn = $('#btn');

$btn.on('click', {value: 'superman'}, (e) => {
  console.log('jQuery e', e.data.value); // superman
});

data의 경우 현재 요소의 index를 저장해놓을 때 사용할 수 있습니다.