htmlラーニング-jqueryイベントリスニングの詳細
3964 ワード
htmlラーニング-jqueryイベントリスニングの詳細 htmlラーニング-jqueryイベントリスニングの詳細 傍受方法 傍受方法パラメータ解釈 clickパラメータ イベント自動実行問題解決 bindメソッド liveメソッド
リスニング方法
jqueryでは、傍受の方法が多く、最も多く使われているのは簡単な
addEventListener()とbind()メソッドには大きな機能的な違いはありません.
リスニングメソッドパラメータの説明
.click()パラメータ
簡単な傍受方法、例えば
selectorはセレクタです
これがボタンをクリックしたときに中のコールバック関数を除いて、要素pを隠す効果です.
イベント自動実行の問題解決
このうち、単純なイベントリスニング方法でも、
このコードは自動的に実行され、idがcreateImageDataのボタンをクリックしなくてもclick()の関数にカッコを付けてカッコを付けないとこの問題は発生しません.
Bind()メソッド
event
バインドされたイベントのタイプを説明するには、記入する必要があります.
data
オプションで、関数に渡す追加データを指定します.
function
記入する必要があります、イベント応答関数
例は次のとおりです.
その後、
次のように、ある要素に複数のイベントをバインドします.
このコードソース:W 3 C
ここで、
live()メソッド
私たちは
だいたい以上です.
転載は出典を明記してください.
リスニング方法
jqueryでは、傍受の方法が多く、最も多く使われているのは簡単な
.click()
.onchange()
.pressdown()
なので、簡単ですね.直接使えばいいので、パラメータ仕様に合えばいいです.これ以外にもbind()
live()
の方法があります.addEventListener()とbind()メソッドには大きな機能的な違いはありません.
bind()
メソッドはjqueryがブラウザの互換性の問題を解決するために作成したものです.リスニングメソッドパラメータの説明
.click()パラメータ
簡単な傍受方法、例えば
.click()
では、そのパラメータはコールバック関数が1つしかありません.$(selector).click(function)
selectorはセレクタです
$("button").click(function(){
$("p").slideToggle();
});
これがボタンをクリックしたときに中のコールバック関数を除いて、要素pを隠す効果です.
.bind()
の方法は以下で詳しく説明します.イベント自動実行の問題解決
このうち、単純なイベントリスニング方法でも、
.bind()
.live()
などでも、自動的に実行されるという問題が発生する可能性があります.匿名コールバック関数を使用する場合は遭遇しませんが、独自の名前のコールバック関数を使用すると、次のような例があります.$('#createImageData').click(createImageDataPressed());
function createImageDataPressed(event){
alert("click");
}
このコードは自動的に実行され、idがcreateImageDataのボタンをクリックしなくてもclick()の関数にカッコを付けてカッコを付けないとこの問題は発生しません.
$('#createImageData').click(createImageDataPressed);
のように自動実行の問題は発生しません.Bind()メソッド
.bind()
メソッドは、addEventListenerとは大きく異なるものではありません.$(selector).bind(event,data,function)
event
バインドされたイベントのタイプを説明するには、記入する必要があります.
data
オプションで、関数に渡す追加データを指定します.
function
記入する必要があります、イベント応答関数
例は次のとおりです.
$("button").bind("click",function(){
$("p").slideToggle();
});
その後、
.bind()
の方法にはもう一つの使用方法があります.$(selector).bind(event:function, event:function, ...);
次のように、ある要素に複数のイベントをバインドします.
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
このコードソース:W 3 C
ここで、
.bind()
の方法は、ページに先にロードされた要素にのみ機能し、後に生成された要素には機能しません.だからこの時は.live()
が必要ですlive()メソッド
私たちは
.bind()
と.live()
を同じものと見なすことができますが、.live()
には未来の要素、すぐに生成される要素、そしてすでにある要素に役立つ機能があり、便利になります.だいたい以上です.
転載は出典を明記してください.