English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
事件是Web应用程序可以检测到的操作。
jQuery提供了将事件处理程序附加到选择的简单方法。
发生事件时，将执行提供的函数。
以下是示例事件：
网页加载
点击一个元素
将鼠标移到元素上
提交HTML表格
键盘上的按键等
在jQuery中，大多数DOM事件具有等效的jQuery方法。
要将点击事件分配给页面上的所有段落，请执行以下操作：
$("p").click();下一步是定义事件发生时应发生的情况。您必须将一个函数传递给事件：
jQueryの「p」要素にclickイベントをバインドする方法 // 需要执行的动作... });
此示例在单击页面时隐藏页面上的段落：
jQueryの「p」要素にclickイベントをバインドする方法 $(this).hide(); });テストを見て‹/›
本示例将一个“changeSize”函数附加到click事件：
$(document).ready(function(){
$("p").click(changeSize);
});
function changeSize() {
$(this).animate({fontSize: "+=5px"});
}テストを見て‹/›$（document）.ready()
jQuery $(document).ready()方法指定在DOM完全加载时要执行的函数。
以下示例在加载DOM时显示一条消息：
$(document).ready(function(){
jQueryの「p」要素にテキスト「现在已经加载了DOM，可以对其进行操作.」を設定する方法
});テストを見て‹/›click()
jQuery click()メソッドはイベントハンドラ関数を選択された要素にバインドします。
ユーザーがこの要素をクリックすると、この関数が実行されます：
jQueryの「p」要素にclickイベントをバインドする方法 jQueryの「this」要素の背景色を設定する方法-「color」：「#007「FFF」、「color」：「white」}); });テストを見て‹/›
mouseenter()
jQuery mouseenter()メソッドはイベントハンドラ関数を選択された要素にバインドします。
マウス指標がこの要素に重なったときに実行される関数：
jQueryの「p」要素にmouseenterイベントをバインドする方法
$("this").css("background-「color」、「yellow」);
});テストを見て‹/›mouseleave()
jQuery mouseleave()メソッドはイベントハンドラ関数を選択された要素にバインドします。
マウス指標がこの要素から離れたときに実行される関数：
jQueryの「p」要素にmouseleaveイベントをバインドする方法
$("this").css("background-「color」、「lightblue」);
});テストを見て‹/›mousedown()
jQuery mousedown()メソッドはイベントハンドラ関数を選択された要素にバインドします。
ユーザーが要素上にマウスボタンを押したときに実行される関数：
jQueryの「p」要素にmousedownイベントをバインドする方法 jQueryの「this」要素の後ろに「<p style=&"39;color:red;'マウスボタンを押下</「p」>「」; });テストを見て‹/›
mouseup()
jQuery mouseup()メソッドはイベントハンドラ関数を選択された要素にバインドします。
マウス指標がこの要素に重なっている状態でマウスボタンを解放すると、この関数が実行されます：
jQueryの「p」要素にmouseupイベントをバインドする方法 jQueryの「this」要素の後ろに「<p style=&"39;color:green;'マウスボタンを解放</「p」>「」; });テストを見て‹/›
keydown()
jQuery keydown()メソッドはイベントハンドラ関数を選択された要素にバインドします。
ユーザーがキーボードのキーを押したときに実行される関数：
jQueryの「input」要素にkeydownイベントをバインドする方法
$("this").css("background-「color」、「yellow」);
jQueryの「span」要素にtextプロパティにevent.typeを設定する方法
});テストを見て‹/›keyup()
jQuery keyup()メソッドはイベントハンドラ関数を選択された要素にバインドします。
ユーザーがキーボードのキーを離したときに実行される関数：
jQueryの「input」要素にkeyupイベントをバインドする方法
$("this").css("background-「color」、「lightblue」);
jQueryの「span」要素にtextプロパティにevent.typeを設定する方法
});テストを見て‹/›hover()
jQuery hover()メソッドには二つの関数があり、mouseenter()およびmouseleave()メソッドの組み合わせを変更します。
以下の例では、マウス指標を上に持ち込んだ時点ですべての<p>要素の背景色：
jQueryの「p」要素にhoverイベントをバインドする方法
$("this").css("background-「color」、「yellow」);
}, function() {
$("this").css("background-「color」、「lightblue」);
});テストを見て‹/›jQueryは「on()」メソッドを提供しています。on()選択された要素上のどんなイベントにも応答する方法
使用on()メソッドに追加することができます。選択された要素にイベントハンドラを一つまたは複数追加できます。
以下の例では、clickイベントをすべての<p>要素：
jQueryの「p」要素に「click」イベントをバインドする方法
$("this").css("background-color", "coral");
});テストを見て‹/›以下の例では、mouseenterイベントをすべて<p>要素：
$("p").on("mouseenter", function(){
$("this").css("background-color", "coral");
});テストを見て‹/›以下の例では、複数のイベントハンドラを<div>要素：
$("div").on("mouseenter mouseleave click", function(){
$("this").text(Math.random());
});テストを見て‹/›jQuery off() メソッドで削除しますon()メソッドに付随する一つまたは複数のイベントハンドラ。
以下の例では、<div>要素からmousemoveイベントを削除します：
$("button").click(function(){
$("div").off("mousemove");
});テストを見て‹/›jQueryのイベントシステムはW3C標準で標準化されたイベントオブジェクト。
イベントオブジェクトをイベントハンドラに渡すことを確認してください。
各イベントハンドラは、多くの属性とメソッドを含むイベントオブジェクトを受け取ります。
$("div").on("click", function(event){
alert("Event type is " + event.type);
alert("Target : " + event.target.innerHTML);
});テストを見て‹/›以下のテーブルはすべてのイベントオブジェクトのメソッドと属性を示します：
| メソッド/属性 | 説明 |
|---|---|
| event.currentTarget | イベントバブルの現在のDOM要素 |
| event.data | イベントメソッドに渡されるオプションデータを含みます |
| event.delegateTarget | 現在の呼び出しでjQueryイベントハンドラを追加した要素を返します |
| event.isDefaultPrevented() | 返しますevent.preventDefault()イベントオブジェクトに呼び出されます |
| event.isImmediatePropagationStopped() | 返しますevent.stopImmediatePropagation()イベントオブジェクトに呼び出されます |
| event.isPropagationStopped() | 返しますevent.stopPropagation()イベントオブジェクトに呼び出されます |
| event.metakey | イベントがトリガーされた時にMETAキーが押されていたかどうかを示します |
| event.namespace | イベントがトリガーされた時の指定されたネームスペースを返します |
| event.pageX | ドキュメントの左エッジからのマウス位置を返します |
| event.pageY | ドキュメントのトップエッジからのマウス位置を返します |
| event.preventDefault() | ブラウザが選択された要素のデフォルトの操作を実行するのを防ぎます |
| event.relatedTarget | マウスの移動時に入力または退出する要素を返します |
| event.result | 指定されたイベントによってトリガーされたイベントハンドラが返した最後のを含みます/前の値 |
| event.stopImmediatePropagation() | 他のイベントハンドラが呼び出されないようにします |
| event.stopPropagation() | イベントのDOMツリーのバブルを防ぎ、親のイベントハンドラがそのイベントの通知を受け取らないようにします |
| event.target | イベントを発生させたDOM要素を返します |
| event.timeStamp | イベントが作成された時間（紀元からのミリ秒数）を返します |
| event.type | どの種類のイベントが発生したかを返します |
| event.which | イベントを発生させたキーボードキーまたはマウスボタンのを返します |
完全なイベントリファレンスについては、私たちのjQuery Events リファレンスマニュアル。