Seongsiks

Being A DevOpser. Powered by
Obtvse, highlight.js, theme toc Creative Commons License
Seongsiks Twitter Github Email
DevOps Ruby On Rails Chef Projects Misc Movies & Drama ME

Jquery : Event #1

Overview

Jquery event관련 몰랐던 기능들 정리해놓기

Data Attribute

html

<section id="tabs">
  <ul>
    <li><a href="#2012-09-27" data-flights="6">Sep 27</a></li>
    <li><a href="#2012-09-28" data-flights="5">Sep 28</a></li>
    <li><a href="#2012-09-29" data-flights="5">Sep 29</a></li>
  </ul>
</section>

javascript

$('#tabs ul li:first a').data('flights');

Multiple Event Binding

$("#tabs li a").bind({
  click: changeTab,
  mouseenter: showNumberOfFlights,
  mouseleave: hideNumberOfFlights
});

Namespacing Events

$("#tabs li a").bind({
  "click.flightSchedule": changeTab,
  "mouseenter.flightSchedule": showNumberOfFlights,
  "mouseout.flightSchedule": hideNumberOfFlights
});

$("#tabs li a").unbind(".flightSchedule");

Delegate

$("#flights a").live("click", selectFlight);
$(document).delegate("#flights a", "click", selectFlight);
// 위에 두개는 똑같음, delegate을 이용해 live 하는 범위를 줄여줌
// 속도면에서 이득이 있음 
$("#tabs div").delegate("#flights a", "click", selectFlight);
comments powered by Disqus
Back to Misc