ディレクトリ
結合事象
使用jQueryのイベントモデルは、DOM要素にイベントハンドラを作成するためにバインド（）メソッドを使用することができます。使用バインドの機能は以下のとおりです。
方法構文：バインド
バインド（eventTypeを、データ、hanlder）
バインド（EventMap）
指定されたイベントタイプのプロセッサのマッチングのすべての要素に焦点を当てるように、関数を作成するための
パラメータを
指定プロセッサとしてのeventType（文字列）を作成しますイベントタイプの名前。あなたは、複数のイベントタイプを指定するには、スペース区切りのリストを使用することができます
これらのイベントタイプは、名前空間を指定することができ、イベントの名前の後に別のサフィックスにドット文字を追加することによって。このセクションの残りの部分について詳細に説明する
イベント・インスタンスのデータプロパティに追加する発信者データ（オブジェクト）によって供給されたデータを、プロセッサとしての機能に使用することができます。省略した場合は、第二の機能プロセッサのためのパラメータを指定することができます
イベントハンドラの関数として作成されますハンドラ（関数）。この関数が呼び出されると、（これは）現在の要素のバブリング段階でイベントインスタンスを渡し、関数コンテキストを設定します
eventMap（オブジェクト）を使用すると、単一の呼び出しでプロセッサの複数のイベントタイプを作成することができますJavaScriptオブジェクト。name属性は、属性の値は、プロセッサの提供、イベントの種類（同じのeventTypeパラメータ）を指定し
、戻り値の
パッケージセットを
- イラスト
/*
为页面上的每个图片绑定提供内联函数，作为单击事件处理器
*/
$('img').bind('click',function(event){alert('Hi there!');});
/*
对img图片添加3个事件
*/
$('img').bind({
click: function(event) { /* handle clicks */ },
mouseenter: function(event) { /* handle mouseenters */ },
mouseleave: function(event) { /* handle mouseleaves */ }
});
開発者がより簡単にイベントを結合できるようにするには、jQueryのは、より多くのコードを節約するために、共通のイベントをカプセル化します。私たちは、短いイベントを呼び出し、次の表を参照してください。
| メソッド名 | トリガ条件 | 説明 |
|---|---|---|
| クリック（FN） | マウス | 各トリガ一致する要素をクリック（クリック）イベント |
| DBLCLICK（FN） | マウス | 各DBLCLICKトリガ整合素子（ダブルクリック）イベント |
| マウスダウン（FN） | マウス | 各トリガ整合素子のマウスダウン（クリック）イベント |
| mouseup（FN） | マウス | 各トリガ整合素子のmouseupイベント（ポップアップをクリックしてください） |
| マウスオーバー（FN） | マウス | 各トリガーマウスオーバーマッチング要素（マウス移動）イベント |
| マウスアウト（FN） | マウス | 各トリガ整合素子マウスアウト（マウスのうち）イベント |
| MouseMove（FN） | マウス | それぞれのMouseMoveトリガー整合素子（マウスの動き）イベント |
| MouseEnter（FN） | マウス | 各トリガー事件（スルーマウス）整合素子のMouseEnter |
| mouseleave（FN） | マウス | mouseleaveトリガー各整合素子（マウスピアス）イベント |
| KeyDownイベント（FN） | キーボード | 各トリガ整合素子のKeyDown（キーボードプレス）イベント |
| keyup（FN） | キーボード | 各トリガ整合素子keyUpイベント（プレスキーボードがポップアップ表示）イベント |
| キーの押下（FN） | キーボード | キー押下（キーボード・プレス）の整合素子をトリガするイベント |
| アンロード（FN） | ファイル | このページをアンインストールするときに実行される関数をバインド |
| リサイズ（FN） | ファイル | 各トリガ整合素子のサイズ変更（文書のサイズを変更する）イベント |
| スクロール（FN） | ファイル | 各トリガ一致する要素のスクロール（スクロールバー）のイベント |
| フォーカス（FN） | フォーム | トリガー焦点の合致要素（活性化のフォーカス）イベント |
| ブラー（ファン） | フォーム | 各トリガ整合素子ブラー（フォーカス損失）イベント |
| focusIn（FN） | フォーム | 各トリガ整合素子とfocusIn（フォーカス活性化）イベント |
| focusout（FN） | フォーム | 各トリガ整合素子focusout（フォーカス損失）イベント |
| （FN）を選択 | フォーム | 各トリガ整合素子は、（選択されたテキスト）イベントを選択します |
| 変更（FN） | フォーム | 変更（値の変化）の整合素子をトリガするイベント |
| （FN）を提出 | フォーム | 一致した各要素をトリガするために提出する（フォーム送信）イベント |
- イラスト
ここでのカプセル化のほとんどのメソッドは、よりよく理解されている、我々は11本のプレゼンテーションを必要としない、区別のいくつかの速記法を見に注意を払うにフォーカスニーズを確認しました。
.mouseover（）と.mouseout（）およびトリガされたときから移動マウスを表します。jQueryのは、次いで、さらに別のグループをカプセル化：.mouseenter（）及び（.mouseleave）トリガ時間を介してマウス穿孔を示します。したがって、これら二つのグループの性質上の違いは何ですか？手動の手順である：（トリガーはありませんが、.mouseover（）と.mouseoutサブグループの要素を通過.mouseenter（）と.mouseleaveは（））トリガされます。
<!--HTML页面设置-->
<div style="width：200px；height：200px；background：green；">
<p style="width：100px；height：100px；background：red；">
</div>
<strong></strong>
<script>
//mouseover移入
$（'div'）.mouseover（function （） {//移入div 会触发，移入p 再触发
$（'strong'）.html（function （index， value） {
return value+'1'；
}）；
}）；
//mouseenter穿过
$（'div'）.mouseenter（function （） {//穿过div 或者p
$（'strong'）.html（function （index， value） {//在这个区域只触发一次
return value+'1'；
}）；
}）；
//mouseout移出
$（'div'）.mouseout（function （） { //移出p 会触发，移出div 再触发
$（'strong'）.html（function （index， value） {
return value+'1'；
}）；
}）；
//mouseleave穿出
$（'div'）.mouseleave（function （） {//移出整个div 区域触发一次
$（'strong'）.html（function （index， value） {
return value+'1'；
}）；
}）；
.keydown（）、.keyup（）返回的是键码，而.keypress（）返回的是字符编码。
$（'input'）.keydown（function （e） {
alert（e.keyCode）；//按下a 返回65
}）；
$（'input'）.keypress（function （e） {
alert（e.charCode）；//按下a 返回97
}）；
</script>注：e.keyCodeとe.charCodeは、文字だけでなく、いくつかの非文字キーの違いに加えて、両方のイベント・スワップに異なる結果を生成します。
.focus（）と.blur（）カーソル活性化および損失を示し、イベントトリガタイミングが現在の要素です。.focusin（）と.focusout（）はカーソルが活性化され、失われたことを示しているが、トリガ・イベントのタイミングは、子要素であってもよいです。
<!--HTML部分-->
<div style="width：200px；height：200px；background：red；">
<input type="text" value="" />
</div>
<strong></strong>
<script>
//focus光标激活
$（'input'）.focus（function （） {//当前元素触发
$（'strong'）.html（'123'）;
}）;
//focusin光标激活
$（'div'）.focusin（function （） {//绑定的是div 元素，子类input 触发
$（'strong'）.html（'123'）;
}）;
</script>注：.blur（）と.focusout（）カーソルが失われることを示し、そして活性化は、トリガーでなければならない現在の要素と同様であり、そして他の子要素をトリガすることができます。
最も人気のあるイベントの効果の多くはJQueryの提供は、多くの機能の組み合わせは、このようなスイッチング、インテリジェントな負荷などのような複雑なイベントの数を達成するために。
| メソッド名 | 説明 |
|---|---|
| レディ（FN） | DOMは、トリガイベントがロードされると |
| ホバー（[FN1、] FN2） | マウスは、トリガFN2のトリガー最初FN1、外を移動したとき |
| トグル（FN1、FN2 [、FN3 ..]） | マウスがトリガーFN1をクリックして、トリガーFN2をクリックすると、廃止されました。。.. |
- イラスト
//背景移入移出切换效果
$（'div'）.hover（function （） {
$（this）.css（'background'， 'black'）；//mouseenter 效果
}， function （） {
$（this）.css（'background'， 'red'）；//mouseleave 效果，可省略
}）；注：.hover（）メソッドは.mouseenter（）メソッドと.mouseleva（）メソッドではなく.mouseover（）と.mouseout（）メソッドの組み合わせです。
.toggle（）このメソッドは、かなり特殊で、この方法は二つの意味があります。バージョン1.8と一緒に過ごしてきた意味の第一層、クリックスイッチの使用複合イベントのバージョン1.9削除の使用状況を、私は意志含む第二層アニメーションでその章を説明します。以来、廃棄、および使用すべきではありません。削除された理由は以下のとおりです。混乱を減らすとモジュールの潜在能力を強化します。しかし、あなたは本当にこのメソッドを使用すると、同様の機能を自分で書きたくない、あなたはメソッドが削除された下位互換性がある、jqueryの-migrate.jsファイルをダウンロードすることができます。
//背景点击切换效果（1.9 版删除了）
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
$（'div'）.toggle（function （） {//第一次点击切换
$（this）.css（'background'， 'black'）；
}， function （） {//第二次点击切换
$（this）.css（'background'， 'blue'）；
}， function （） {//第三次点击切换
$（this）.css（'background'， 'red'）；
}）；
/*
注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，
如果在不基于向下兼容的插件JS。我们可以自己实现这个功能。
*/
var flag = 1；//计数器
$（'div'）.click（function （） {
if （flag == 1） {//第一次点击
$（this）.css（'background'， 'black'）；
flag = 2；
} else if （flag == 2） {//第二次点击
$（this）.css（'background'， 'blue'）；
flag = 3
} else if （flag == 3） {//第三次点击
$（this）.css（'background'， 'red'）；
flag = 1
}
}）；第二に、アンバンドリングイベント
jQueryのは、イベント処理のための追加機能を提供し、名前空間を指定することにより、グループイベントハンドラにあります。そして、それにイベントの名前を追加することにより、（名前空間接頭辞で指定された）従来の異なる名前空間には、ドットの接尾辞で区切られた名前空間を指定します。ご希望の場合は実際には、あなたは複数の名前空間に複数のサフィックスのイベントを使用することができます。
このようにグループ化された結合事象は、それらは、その動作のための単位と考えることができます。
表示モードと編集モード：たとえば、ページには2つのモードがあります。ページが編集モードを終了するときに、あなたはこれらのリスナーを削除する必要があり、編集モードでは、イベントリスナーは、ページの多くの要素の上に置かれますが、表示モードでは、これらのリスナーは適用されません。私たちは、次のようにコードは、編集モードでイベントの名前空間を指定することができます。
$('#thing1').bind('click.editMode',someListener);
$('#thing2').bind('click.editMode',someOtherListener);
//当页面离开编辑模式需要删除所有的绑定时
$('*').unbind('click.editMode');メソッドの構文：アンバインド
アンバインド（eventTypeを、リスナー）
アンバインド（イベント）は
、オプションのパラメータ渡されたイベントハンドラで指定されたパッケージのすべての要素を削除するように設定されています。パラメータなしならば、それは要素からすべてのリスナーを削除します
パラメータ
提供されている場合のみ、指定されたイベントタイプ用に作成されたリスナー削除eventTypeを（文字列）
リスナーを（機能）を備えている場合、指定されたリスナーを削除することが確認します
イベント（イベント）を削除トリガイベントリスナーの例を説明
の戻り値
パッケージ・セットを
第三に、イベントオブジェクト
イベントオブジェクトは、デフォルトのハンドラのパスを受け入れることによって、対象のイベントです。イベントハンドラの前にEがイベントオブジェクトで、イベントオブジェクトには、多くの属性や利用可能な方法は、以下の例があります。
//通过处理函数传递事件对象
$（'input'）.bind（'click'， function （e） { //接受事件对象参数
alert（e）;
}）;| プロパティ名 | 説明 |
|---|---|
| タイプ | クリックなど、イベントのイベントタイプを取得します。 |
| 目標 | イベントをバインドDOM要素を取得します。 |
| データ | 追加のデータ収集イベントの呼び出し |
| relatedTarget | DOM要素を残したり、入力するために目標点の中と外に移動します |
| currentTarget | DOM要素をバブリングする前にトリガ取得、これは同等です |
| pageX、pagey | ページの原点を基準に、水平/垂直の取得します |
| がscreenX、screenYの | 水平/垂直（非jQueryのパッケージ）の表示画面位置を取得します |
| clientX、clientYプロパティ | ビューポートの水平/垂直（非jQueryのパッケージ）に関連してページを取得します。 |
| 結果 | 最近の非未定義値は、前のイベントハンドラから返されます |
| timeStampに | トリガータイムスタンプイベントを取得 |
| これ | キーボードイベントのために、キーイベントトリガデジタルコードを指定し、ボタン（ボタン1、ボタン2、3右）のプレスを指定するマウスイベントのため。それは一貫性クロスブラウザボタンのプロパティを保証することはできませんので、ボタンの属性の代わりに使用されるべき性質 |
| altKeyの | Altキーが押された場合、トリガイベントは、それが真、そうでない場合はfalseに設定されている場合。ほとんどのMacキーボードのAltキーラベルオプションで |
| ctrlKey | Ctrlキーが押された場合、トリガイベントは、それがそうでない場合は真、falseに設定されている場合 |
| metakeyな | メタキーが押された場合、トリガイベントは、それが真、そうでない場合はfalseに設定されている場合。PCのMetaキーのCtrlキー、およびMacのコマンドキーであります |
| シフトキー | Shiftキーが押された場合、トリガイベントは、それがそうでない場合は、真falseに設定されている場合 |
- イラスト
//通过event.type 属性获取触发事件名
$（'input'）.click（function （e） {
alert（e.type）；
}）；
//通过event.target 获取绑定的DOM 元素
$（'input'）.click（function （e） {
alert（e.target）；
}）；
//通过event.data 获取额外数据，可以是数字、字符串、数组、对象
$（'input'）.bind（'click'， 123， function （） {//传递data 数据
alert（e.data）；//获取数字数据
）；注：「123」、配列が渡された場合：文字列が通過する場合、オブジェクトが転送される場合、[123、「ABC」]：
{user： 'Lee'， age： 100}。数组的调用方式是：e.data［1］，对象的调用方式是：e.data.user。
//event.data获取额外数据，对于封装的简写事件也可以使用
$（'input'）.click（{user： 'Lee'， age： 100}，function （e） {
alert（e.data.user）;
}）;注：キーと値のペアは引用符で囲むことができ、添加しなくてもよい。呼び出し時にも方法の配列を使用することができます。
alert（e.data［'user'］）;
//获取移入到div 之前的那个DOM 元素
$（'div'）.mouseover（function （e） {
alert（e.relatedTarget）;
}）;
//获取移出div 之后到达最近的那个DOM 元素
$（'div'）.mouseout（function （e） {
alert（e.relatedTarget）;
}）;
//获取绑定的那个DOM 元素，相当于this，区别于event.target
$（'div'）.click（function （e） {
alert（e.currentTarget）;
}）;注意：event.target得到的是触发元素的DOM，event.currentTarget得到的是监听元素的DOM。而this也是得到监听元素的DOM。
//获取上一次事件的返回值
$（'div'）.click（function （e） {
return '123';
}）;
$（'div'）.click（function （e） {
alert（e.result）;
}）;
//获取当前的时间戳
$（'div'）.click（function （e） {
alert（e.timeStamp）;
}）;
//获取鼠标的左中右键
$（'div'）.mousedown（function （e） {
alert（e.which）;
}）;
//获取键盘的按键
$（'input'）.keyup（function （e） {
alert（e.which）;
}）;
//获取是否按下了ctrl 键，meta 键不存在，导致无法使用
$（'input'）.click（function （e） {
alert（e.ctrlKey）;
}）;
//获取触发元素鼠标当前的位置
$（document）.click（function （e） {
alert（e.screenY+ '，' + e.pageY + '，' + e.clientY）;
}）;| 方法 | 描述 |
|---|---|
| preventDefault() | 阻止任意默认的语义动作（比如表单提交、链接重定向、复选框状态的改变等）发生 |
| stopPropagation() | 停止事件沿着DOM树向上进一步传播。当前目标元素上附加的事件不受影响。不仅支持浏览器定义的事件，而且支持自定义事件 |
| stopImmediatePropagation() | 停止所有事件的进一步传播，包括附加在当前目标元素上的事件 |
| isDefaultPrevented() | 如果已经在此实例上调用了preventDefault() 方法，则返回true |
| isPropagationStopped() | 如果已经在此实例上调用了stopPropagation() 方法，则返回true |
| isImmediatePropagationStopped() | 如果已经在此实例上调用了stopImmediatePropagation() 方法，则返回true |
四、高级事件
在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如，当网页加载完毕后自行点击一个按钮触发一个事件，而不是由用户去点击。
//点击按钮事件
$（'input'）.click（function （） {
alert（'我的第一次点击来自模拟！'）;
}）；
//模拟用户点击行为
$（'input'）.trigger（'click'）;
//可以合并两个方法
$（'input'）.click（function （） {
alert（'我的第一次点击来自模拟！'）;
}）.trigger（'click'）;有时在模拟用户行为的时候，我们需要给事件执行传递参数，这个参数类似于event.data的额外数据，可以是数字、字符串、数组、对象。
$（'input'）.click（function （e， data1， data2） {
alert（data1 + '，' + data2）;
}）.trigger（'click'， ［'abc'， '123'］）;注意：当传递一个值的时候，直接传递即可。当两个值以上时，需要在前后用中括号包含起来。但不能认为是数组形式，下面给出一个复杂的说明。
$（'input'）.click（function （e， data1， data2） {
alert（data1.a + '，' + data2［1］）;
}）.trigger（'click'， ［{'a'： '1'， 'b'： '2'}， ［'123'，'456'］］）;除了通过JavaScript事件名触发，也可以通过自定义的事件触发。所谓自定义事件，其实就是一个被.bind（）绑定的任意函数。
$（'input'）.bind（'myEvent'， function （） {
alert（'自定义事件！'）;
}）.trigger（'myEvent'）;.trigger（）方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个空的同名事件即可。
$（'input'）.click（function （） {
alert（'我的第一次点击来自模拟！'）;
}）.click（）；//空的click（）执行的是trigger（）这种便捷的方法，JQuery几乎所有常用的事件都提供了。
| blur | focusin | mousedown | resize |
| change | focusout | mousenter | scroll |
| click | keydown | mouseleave | select |
| dblclick | keypress | mousemove | submit |
| error | keyup | mouseout | unload |
| focus | load | mouseover |
JQuery还提供了另外一个模拟用户行为的方法：.triggerHandler（）；这个方法的使用和.trigger（）方法一样。
$（'input'）.click（function （） {
alert（'我的第一次点击来自模拟！'）;
}）.triggerHandler（'click'）;在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以传递额外参数。但在某些特殊情况下，就产生了差异：
（1）triggerHandler（）方法并不会触发事件的默认行为，而.trigger（）会。
$（'form'）.trigger（'submit'）;//模拟用户执行提交，并跳转到执行页面
$（'form'）.triggerHandler（'submit'）;//模拟用户执行提交，并阻止的默认行为
// 如果我们希望使用.trigger（）来模拟用户提交，并且阻止事件的默认行为，则需要这么写：
$（'form'）.submit（function （e） {
e.preventDefault（）;//阻止默认行为
}）.trigger（'submit'）;（2）triggerHandler（）方法只会影响第一个匹配到的元素，而.trigger（）会影响所有。
（3）triggerHandler（）方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger（）则返回当前包含事件触发元素的JQuery对象（方便链式连缀调用）。
alert（$（'input'）.click（function （） {
return 123;
}）.triggerHandler（'click'））;//返回123，没有return 返回（4）trigger（）在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是JQuery扩展于DOM的机制，并非DOM特性。而.triggerHandler（）不会冒泡。
jQuery提供了我们所期望的live() 方法，该方法允许预先为那些还不存在的元素创建事件处理器。live() 的语法如下。
方法语法：live
live(eventType, data, listener)
当指定类型的事件在元素（任何用来创建包装集的与选择器相匹配的元素）上发生时，会将传入的监听器作为处理器调用，而无论在调用live 方法时这些元素是否已经存在
参数
eventType （字符串）指定处理器将要调用的事件类型的名称。和bind() 不同，不能指定空格分隔的事件类型列表3
3 这个说法不对，从jQuery1.4开始已经可以为live() 方法的第一个参数指定空格分隔的事件类型列表或者自定义事件类型了。
data （对象）调用者提供的数据，用来附加到Event 实例的data 属性，以便为处理器函数所使用。如果省略，可以指定第二个参数为处理器函数
listener （函数）将要作为事件处理器被调用的函数。当调用此函数时，会向此函数传入Event实例，并设置目标元素为函数上下文（this ）
返回值
包装集
如果这个方法的语法让你想起bind() 方法的语法，那就对了。这个方法的定义和行为与bind() 很相似。不同之处是，当相应的事件发生时，该方法会为所有匹配选择器的元素触发此事件，甚至包括那些在调用live() 的时候还不存在的元素。
$('div.attendToMe').live(
'click',
function(event){ alert(this); }
); 在页面的整个生命周期内，单击任意拥有类attendToMe 的<div> 元素都会调用事件处理器并传入一个事件实例。而且前面的代码不需要放置于就绪处理器中，因为“live”事件不关心DOM是否已经存在。
利用live() 方法，可以非常容易地在页面上的某个地方创建需要的事件处理器，而无需担心元素是否已经存在，或者什么时候创建元素。
但是使用live() 时必须要遵守一些注意事项。因为它和bind() 很相似，你可能会期望“live”事件完全按照与原生事件相同的方式工作，但是它们是有差异的，在某些页面中这种差异可能很重要，也可能无关紧要。
首先，要意识到“live”事件不是 原生的“普通”事件。当类似于单击的事件发生时，它会沿着DOM元素向上传播（如前所述），并调用每一个已经创建的事件处理器。一旦事件到达用来创建包装集的上下文，也就是调用live() 的地方（通常是文档根节点4 ），上下文会在子节点中检查匹配“live”选择器的元素5 。“live”事件处理器会在每个匹配的元素上触发，并且这个已触发的事件不能 继续传播。
方法语法：die
die(eventType, listener)
删除由live() 创建的“live”事件处理器，并且阻止在将来创建的元素上调用处理器，这些元素是与调用live() 时使用的选择器相匹配的元素
参数
eventType （字符串）如果提供，则只删除为指定事件类型创建的监听器
listener （函数）如果提供，则找出将要删除的指定监听器
返回值
包装集
