- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JQuery JQUERY – ON 을 알아보자
2018.06.04 18:49
JQUERY – ON 을 알아보자
왜 .click으로 간단하게 클릭 이벤트를 만들면 되지 .on(‘click’) 을 써야하는 것일까요!
그 궁금증을 여기서 해결해봅시당
# 시작
jquery를 이용한 이벤트들을 다루다 보면 의문을 하나 갖게 됩니다.
.click 이벤트 바로 쓰면 되지 왜 .on(‘click’) 이렇게 해야하징. 무슨 차이일까 라는 생각이 들죠!
오늘은 그래서 on에 대해 좀더 자세히 알아보기로 했습니다.
(이 내용은, http://api.jquery.com/on/ 를 참조하여 작성되었습니다.)
on은 선택된 요소들에 하나 이상의 이벤트 핸들러 함수를 추가할 때 쓰입니다.
# 쓰임
그러면 먼저, 형태를 살펴볼까요?
.on( events [, selector ] [, data ], handler ) 의 형태로 사용하면 됩니다.events는 모두가 알듯이 이벤트를 말합니다. s가 붙었으니 여러개도 사용가능 합니다.
String 타입의 값으로, 띄어쓰기를 통해 이벤트들을 구분하여 쓰고, 또 네임스페이스를 옵션으로 사용 가능합니다.
예를들어, click mouseover 라던가, keydown.myName 이런 식으로 말이죠.
그리고, 꼭 입력되어야합니다!
selector 역시 우리 모두가 아는 선택자 입니다.
역시나 String 타입으로, 이벤트가 발생할 요소들의 자손을 찾습니다. 선택자가 null 이거나 생략됐다면 이벤트는 선택된 요소에 한해서 반응하지요.
그리고 data는 모든 타입 가능하며 이벤트가 발생되었을 때 핸들러에 전할 데이터입니다.
handler는 함수 타입으로 이벤트 객체 입니다.
이벤트가 발생되면 실행되는 것으로 혹, false의 값을 리턴하는 함수의 경우는 그냥 간단하게 false값을 사용할 수 있습니당!
이전의 .bind(), .delegate(), .live()를 대신할 메소드로 이벤트 핸들러를 추가하기 위한 모든 기능을 제공합니다. .on을 통해 바운드된 이벤틀르 제거하기 위해선 .off() 메소드를 사용하면 됩니다. 한번만 사용되고 알아서 제거되기 원한다면 .one()메소드를 사용하면 되지요!
# 이벤트 처리, 네임스페이스
보통의 경우, 이벤트 하나에 핸들러 하나를 등록해 처리하지만, jquery에서는 같은 이벤트를 여러 번 처리하거나, 여러 이벤트에 같은 핸들러를 등록하여 처리할 수도 있습니다.
이 때 이벤트 구분은 네임스페이스를 사용합니다. 네임스페이스는 마침표를 기준으로 작성합니다.
click.myName1, click.myName1.myName2 같은 경우, 이 이벤트를 제거하기 위해 $(elem).off(“click.myName1”); 를 사용하게 되면 둘다 제거 되므로 주의해주어야 합니다.
그리고 같은 핸들러에 여러 이벤트를 등록하는 경우는 띄어쓰기를 기준으로 합니다.
$(elem).on("click focus keydown", function(e) { ... });이러한 형태로 쓰이게 되지요.
# 예제
먼저, on과 click 이벤트의 차이를 예제로 봅시다.
예제를 통해 알 수 있듯이, on은 선택자가 지시되었을 때는 새로 추가된 요소에도 같은 이벤트를 적용시킬 수 있습니다. 하지만 click의 경우는 가장 처음, 즉 제이쿼리가 호출 되었을 시에(html이 모두 출력되고 스크립트가 호출된 시점) 있었던 요소들에만 이벤트가 적용되게 됩니다.
그치만 on이라고 또 무조건 그렇게 되는 것은 아닙니다. 여기에 바로 selector의 기능이 나오게 됩니다!
다음 예제를 함께 볼까요?
그치만 on이라고 또 무조건 그렇게 되는 것은 아닙니다. 여기에 바로 selector의 기능이 나오게 됩니다!
다음 예제를 함께 볼까요?
먼저, selector를 지정하지 않은 경우입니다.
아이템 1,2,3을 클릭하게 되면 색이 바뀌고, 아이템 추가 버튼을 누르면 li가 하나씩 더 생깁니다. 하지만 새로 생긴 아이템을 클릭하면 색이 바뀔까요??
다음은, selector를 사용한 경우 입니다!
선택자를 지정한 경우는, 그 요소엔 모두 이벤트가 적용되어 색이 같이 변함을 볼 수 있습니다.
다음 예제는, 띄어쓰기를 사용해서 여러 이벤트를 한 요소에 적용 시키는 예제 입니다.
간단하게 이해되나요?! 띄어쓰기를 이용하면 몇 개의 이벤트든 추가 가능합니다.
다음은, 네임스페이스를 사용한 예제를 봅시다.
스크립트 단의 코드를 보면, click.two와 click.one.two 가 있지요. 이때 off메소드를 통해 click.one.two를 제거하고자 하면, .two만 써도, .one.two로 써도 제거할 수 있습니다. 하지만 .two로 쓰는 경우는, .two가 포함되어있는 ‘click.two’와 ‘click.one.two’ 모두 제거 되게 되는 것이지요.
이렇게 네임스페이스를 통해, 같은 이벤트를 여러번 처리할 수 있게 됩니다.
(네임스페이스가 어려우시다면 댓글을 남겨주세요! 좀더 자세한 설명을 추가하겠습니다. 열심히 공부 중입니당ㅠㅠ)
# data
다음은 data요소에 대해 알아 봅시다. null이나 undefined이 아닌 값을 가지는 경우, 이벤트가 발생될 때 마다 event.data로 핸들러에 넘어가게 됩니다. 어떤 형식이든 가능하지만, string이 사용될 경우는 selector를 꼭 명시해주어야만 중간에 오류를 방지할 수 있습니다.
아래 예제를 통해 다시 알아봅시다.
이렇게, data에 값을 주게 되면 핸들러로 넘어가 원하는 것으로 사용할 수 있게 되지요.
직접 데이터 값과, 변수들을 다양하게 변화시켜보면서 익혀보세요!
직접 데이터 값과, 변수들을 다양하게 변화시켜보면서 익혀보세요!
[출처] http://html5around.com/wordpress/tutorials/tutorial-about-jquery-on/
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
