Latest web development tutorials

jQueryのイベント

jQueryのは、特別イベントハンドラのために設計されています。


イベントとは何ですか?

別の訪問者にページ応答は、イベントと呼ばれます。

イベントハンドラメソッドが呼び出されたときに、特定のイベントがHTMLを発生したときにことを意味します。

例:

  • 要素の上にマウスを移動します。
  • ラジオボタンを選択します
  • 要素をクリックします

この用語は、多くの場合、たとえば、イベント「トリガー」(または「励起」)で使用されている:「あなたがキーを押したときにキー入力イベントをトリガします。」

共通DOMイベント:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload  


jQueryのイベントメソッドの構文

jQueryのでは、ほとんどのDOMイベントは、jQueryのメソッドと同等のものを持っています。

ページ、クリックイベントを指定します。

。$( "P")]をクリックします();

次のステップは何時間トリガ・イベントを定義することです。 あなたは、イベント機能を実装できます。

$( "P")。(関数(){をクリックします
コード!! //アクションがトリガされた後
});


一般的に使用されるjQueryのイベントメソッド

$(ドキュメント).ready()

$(ドキュメント).ready()メソッドは、私たちは完全に関数実行後の文書をロードすることができます。 イベントメソッドjQueryの構文セクションには言及されています。

クリックします()

ボタンクリックイベントがトリガされたときに()メソッドをクリックすると、関数を呼び出します。

ユーザーがHTML要素をクリックしたときにこの関数が実行されます。

次の例では、ときに、現在の<p>要素を非表示にするイベントトリガ<p>要素をクリックしてください:

$("p").click(function(){
$(this).hide();
});

»をお試しください

DBLCLICK()

あなたは、要素をダブルクリックすると、DBLCLICKイベントが発生します。

DBLCLICK()メソッドのDBLCLICK・トリガ・イベント、またはイベントがDBLCLICK発生したときに実行する所定の機能:

$("p").dblclick(function(){
$(this).hide();
});

»をお試しください

MouseEnter()

素子の両端とき、マウスポインタ、MouseEnterイベントが発生します。

MouseEnter()メソッドのMouseEnter・トリガ・イベント、またはイベントがMouseEnterイベントを発生したときに実行する所定の機能:

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

»をお試しください

mouseleave()

マウスポインタが要素を離れると、mouseleaveイベントが発生します。

mouseleave()メソッドのmouseleave・トリガ・イベント、またはイベントがmouseleaveを発生したときに実行する所定の機能:

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

»をお試しください

マウスダウン()

マウスポインタが要素の上を移動し、マウスボタンを押すと、マウスダウンイベントが発生します。

マウスダウン()メソッドは、マウスダウンイベントを実行すると、発生したときに指定されたマウスダウンイベントまたは機能をトリガ:

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

»をお試しください

mouseup()

マウスボタンが要素上で解放されたとき、のmouseupイベントが発生します。

mouseup()メソッドは、イベントが発生したときのmouseup実行するイベント、または所定の機能を誘発するのmouseUp:

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

»をお試しください

ホバー()

ホバー()メソッドは、イベントの上に置いたカーソルをシミュレートするために使用されます。

要素にマウスポインタが移動すると、それは最初に指定された関数(MouseEnterイベント)をトリガします;時要素のオフマウスを移動、それが2番目に指定された機能(mouseleave)をトリガします。

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

»をお試しください

フォーカス()

要素がフォーカスを取得したとき、フォーカスイベントが発生します。

マウスがタブキーを標的にすることにより、選択した要素または要素をクリックすると、要素が焦点になります。

フォーカス()メソッドは、イベントがフォーカスを発生したときに実行するために、フォーカスイベント、または所定の機能をトリガ:

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

»をお試しください

ぼかし()

要素がフォーカスを失うと、blurイベントが発生します。

ブラー()メソッドは、所定のイベントがブレを発生したときに実行するためにblurイベントや関数がトリガされます。

$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

»をお試しください