「jQuery」onメソッドの使い方

書式
.on( events [, selector ] [, data ], handler )
引数について説明
events
複数のイベントを設定します
selector
選択jQueryオブジェクトの子孫要素を設定することでイベントデリゲートできます。
data
イベントハンドラに渡したいデータをハッシュで指定します。
handler
eventsが起きたタイミングで実行されるイベントハンドラ。

使用例1
「userId」を選択してchangeイベントを実行します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$("#userId").on(
  "change",
   function() {
         処理コード}).change();
$("#userId").on(   "change",    function() {          処理コード}).change();
$("#userId").on(
  "change",
   function() {
         処理コード}).change();

使用例2
連想配列にしてイベントにことなる処理コードを実行します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$('.userid').on({
'mouseenter': function(){処理コード1},
'mouseleave': function(){処理コード2}
});
$('.userid').on({ 'mouseenter': function(){処理コード1}, 'mouseleave': function(){処理コード2} });
$('.userid').on({
  'mouseenter': function(){処理コード1},
  'mouseleave': function(){処理コード2}
});

使用例3
半角スペース区切りで複数のイベントを設定します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$('.userid').on('click blur',
        function(){処理コード
   });
$('.userid').on('click blur',         function(){処理コード    });
$('.userid').on('click blur', 
        function(){処理コード

   });

 

jQuery

Posted by arkgame