oneメソッド

メソッド one は要素にイベントハンドラを追加できます。イベントが一度実行された後、ハンドラは自動的に削除されます。

構文

要素にイベントハンドラをアタッチする方法です。最初のパラメータとして、スペースで区切られた1つまたは複数のイベントを文字列で渡し、2番目にJavaScriptオブジェクト形式のデータを渡します。このデータはイベント発生時にハンドラ内の event.data プロパティに渡されます。2番目のパラメータはオプションです。3番目に、イベントオブジェクトが渡される関数ハンドラ、または false を渡します:

javascript$(セレクタ).one(イベント, [データ], 関数ハンドラ(イベントオブジェクト));

2番目のパラメータとして、要素内の子孫要素をフィルタリングする追加のセレクタを渡し、3番目に、イベント発生時にハンドラ内の event.data プロパティに渡される追加データを渡すこともできます。2番目と3番目のパラメータはオプションです。4番目に、イベントオブジェクトとオプションの追加パラメータが渡される関数ハンドラを渡します。関数ハンドラの代わりに false を渡すと、関数は単に false を返します:

javascript$(セレクタ).one(イベント, [セレクタ], [データ], 関数ハンドラ(イベントオブジェクト));

メソッド one を別の方法で使用することもできます。その場合、最初のパラメータとしてJavaScriptオブジェクトを渡します。オブジェクトのキーはイベントタイプ、値は要素に追加した関数ハンドラです:

javascript$(セレクタ).one({'イベントタイプ': handler}, [セレクタ], [データ]);

追加のセレクタを渡さない場合、イベントはハンドラをアタッチした要素でトリガーされます。それ以外の場合、このセレクタに一致する子孫要素でトリガーされます(委譲イベント)。

例

段落をクリックしたときに、メソッド one に渡したデータを表示してみましょう。その後のクリックでは何も起こりません。作成した関数ハンドラ testFunc を使用します:

html<p>クリック</p>
javascriptfunction testFunc(event) {
  alert(event.data.text);
}

$('p').one('click', {text: 'aaa' }, testFunc);

関連項目

  • メソッド on,
    要素にイベントハンドラをバインドできます
  • メソッド off,
    要素からイベントハンドラを削除できます
  • オブジェクト event,
    イベントに関する情報を含みます