one( eventType, fn )

jQuery API の one( eventType, fn ) は、1つ目の引数に指定したイベントに、2つ目の引数に指定したイベントハンドラを、一度だけバインドすることができるメソッド。イベントハンドラを一度しか呼び出さない点が、bind( eventType, fn ) との違い。

カスタムイベントにバインドすることもできる。

記述方法

jQuery( セレクター ) . one( イベントタイプ, イベントハンドラ );

「セレクター」の要素の「イベントタイプ」のイベントに、「イベントハンドラ」をバインド。

eventType

1つ目の引数に指定できるイベントタイプと、そのイベントタイプの説明。

eventType 説明
blur 要素からフォーカスを外したとき。
change select 要素や、input 要素の値を変更したとき。
click 要素をクリックしたとき。
dblclick 要素をダブルクリックしたとき。
error エラーイベントが発生したとき。
focus 要素をフォーカスしたとき。
keydown 要素の領域内で、キーボタンを押したとき。
keypress 要素の領域内で、キーボタンを押したとき。
keyup 要素の領域内で、押し下げたキーボタンを上げたとき。
load 画像、スクリプトなど、サブ要素を全て読み込んだとき。
mousedown 要素の領域上でマウスのボタンを押したとき。
mouseenter マウスが要素の領域内に入ったとき。
mouseleave マウスが要素の領域内から離れたとき。
mousemove マウスを要素の領域上で動かしたとき。
mouseout マウスを要素の領域外へ動かしたとき。
mouseover マウスを要素の領域上で動かしたとき。
mouseup 要素の領域上でクリックボタンを押して放したとき。
resize ブラウザのウィンドウのサイズを変更したとき。
scroll 要素をスクロールしたとき。
select テキスト入力欄やテキストエリアにおけるテキストを選択したとき。
submit フォームを送信したとき。
unload ページから移動したとき。

実装例(サンプル)

セル1

セル2

セル3

セル4

セル5

セル6

実装例(サンプル)の動作について

黄色のセルを、クリックすると、背景色が赤色に変わり、セル内のテキストが、「クリック済み」に置き換わる。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '.jquery-api-one' ) . one( 'click', function() {
        jQuery( this ) . css( 'backgroundColor', 'red' );
        jQuery( 'p', this ) . text( 'クリック済み' );
    } );
} );
// -->
</script>

CSS

<style>
<!--
.jquery-api-one {
    width: 100px;
    height: 50px;
    cursor: pointer;
    background-color: yellow;
    text-align: center;
}
-->
</style>

HTML

<table>
    <tr>
        <td class="jquery-api-one"><p>セル1</p></td>
        <td class="jquery-api-one"><p>セル2</p></td>
        <td class="jquery-api-one"><p>セル3</p></td>
    </tr>
    <tr>
        <td class="jquery-api-one"><p>セル4</p></td>
        <td class="jquery-api-one"><p>セル5</p></td>
        <td class="jquery-api-one"><p>セル6</p></td>
    </tr>
</table>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベントハンドラ・アタッチメント パーマリンク