[jQuery] on으로 eventlistener 추가 할 때 인자값 넘기는 방법

on으로 eventlistener 추가 할 때 인자값 넘기는 방법

---

$("id/class").on(event, handler)

이런식으로 사용하면 어떤 동작(event)이 일어났을 때, 해당 선택자가 어떠한 일(handler)을 처리하는지를 넣을 수 있음.

개발할 때 HTML inline에 onclick등과 같은 걸 넣지 않기로 미리 정했음. 

inline에서는

<p id="test" onclick="helloFunction('1')"> 누르세요 </p>

이런식으로 onclick을 사용했는데 얘를 안쓰자고 합의를 하고 보니 매서드의 파라미터를 넘기는 데에서 문제가 생겼음.

해결하려고 찾아보니 jQuery의  on 매서드 안에 data를 넣을 수 있다고 함

http://api.jquery.com/on/

이곳에 들어가보면 on 매서드의 파라미터를 볼 수 있음!

on은 

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

로 구성되어 있고 data에 내 파라미터를 넘기면 완성!

예시로 들면 script 단에

$("p").on("click", {data1 : '1'}, helloFunction);

이런식으로 사용하면 되고 매서드에서  저 data1을 받으려면

function helloFunction (event) {

var test = event.data.data1;

}

이렇게 event를 매서드의 파라미터로 넣어주고 

event.data.파라미터명 으로 받으면 해결!

두 개 이상의 파라미터를 넘길 때는  데이터 넣는 {   } (컬리브레이스) 안에 쉼표로 구분해서 넣어주면 됨!