Js

実現時のjqueryは複数のイベントをバインドします



Jquery Realization Bind Multiple Events



on(events、[selector]、[data]、fn)
概要概要
選択要素の1つ以上のイベントハンドラーのイベントをバインドします。

on()jQueryオブジェクトの現在選択されている要素にバインドするイベントハンドラーメソッド。
jQuery 1.7では、.on()メソッドはイベントハンドラーのバインドに必要なすべての関数を提供します。
古いjQueryイベントメソッドからの移行を支援します。.bind()、. delegate()、および.live()を参照してください。 .on()イベントバインディングを削除するには、.off()を参照してください。
イベントの実行を1回だけアタッチしてから自分自身を削除するには、.one()を参照してください。



パラメータ

イベント 、[セレクター]、[データ]、fnV1.7

イベント :1つ以上のスペースで区切られたイベントタイプと、「click」や「keydown.myPlugin」などのオプションの名前空間。



セレクタ :イベントフィルターをトリガーした子孫セレクター要素のセレクター文字列。選択した場合

データ :イベントがトリガーされると、event.dataがイベントハンドラーに渡されます。

fn :イベントがトリガーされたときに実行される関数。 false値は、省略関数を実行してfalseを返すこともできます。



イベントマップ、[セレクター]、[データ] V1.7

イベントマップ :1つ以上のスペースイベントタイプとオプションの名前空間の文字列表現。イベントハンドラ値はバインディングを示します。

セレクタ :セレクター文字列がフィルター要素を選択しました。セレクター要素の子孫はハンドラーを呼び出します。オプションが空であるか、選択した要素に到達したときに無視された場合、イベントは常にトリガーされます。

データ :イベントがトリガーされると、event.dataがイベントハンドラーに渡されます。

同じ関数にバインドされた複数のイベント

$(document).ready(function(){ $('p').on('mouseover mouseout',function(){ $('p').toggleClass('intro') }) })

異なる関数にバインドされた複数のイベント

$(document).ready(function(){ $('p').on({ mouseover:function(){$('body').css('background-color','lightgray')}, mouseout:function(){$('body').css('background-color','lightblue')}, click:function(){$('body').css('background-color','yellow')} }) })

カスタムイベントのバインド

$(document).ready(function(){ $('p').on('myOwnEvent', function(event, showName){ $(this).text(showName + '! What a beautiful name!').show() }) $('button').click(function(){ $('p').trigger('myOwnEvent',['Anja']) }) })

データを関数に渡す

function handlerName(event) { alert(event.data.msg) } $(document).ready(function(){ $('p').on('click', {msg: 'You just clicked me!'}, handlerName) })