function swipeleftHandler( event ){ // swipeleftHandler 라는 함수가 호출되면 $( event.target ).addClass( "swipeleft" ); // 이걸 호출한 바로 그 대상이 타겟이 되어 클래스 swipeleft 를 넣어준다. } $( "div.box" ).on( "swipeleft", swipeleftHandler ); // .on() 메서드를 이용하여 swipeleft 라는 이벤트를 넣어준다. 그리고 이 벤트가 동작을 하게되면 swipeleftHandler 라는 함수롤 호출하게 한다.
<h3>Swipe the green rectangle in the left direction to change its color:</h3> <div class="box"></div>
html, body { padding: 0; margin: 0; } html, .ui-mobile, .ui-mobile body { height: 105px; } .ui-mobile, .ui-mobile .ui-page { min-height: 105px; } #nav { font-size: 200%; width:17.1875em; margin:17px auto 0 auto; } #nav a { color: #777; border: 2px solid #777; background-color: #ccc; padding: 0.2em 0.6em; text-decoration: none; float: left; margin-right: 0.3em; } #nav a:hover { color: #999; border-color: #999; background: #eee; } #nav a.selected, #nav a.selected:hover { color: #0a0; border-color: #0a0; background: #afa; } div.box { width: 30em; height: 3em; background-color: #108040; } div.box.swipeleft { background-color: #7ACEF4; }