イベント
HTML要素のイベントは、イベントが、クリック、onmouseover属性、れるonmouseoutなどなどのイベントのすべての種類を作る（主契約者要素イベントを参照）外の世界にhtml要素を発生したときに自動的に生成される内部ブラウザです。
DOMイベントフロー
DOM（Document Object Model）ツリー構造HTML要素はイベントを生成構造、要素とルートノードとの間のイベントの伝播経路、ノードがイベントを受け取るれる経路でありますこの通信プロセスは、DOMイベントフローを呼び出すことができます。
イベントモデルの主要なブラウザ
サブスクリプションのHTML要素のイベント、DOMレベル3は唯一の別の後、ほとんどの主要なブラウザは、DOM標準イベント・モデルをサポートすることを規定した後まで、各ブラウザの実装は、治療モデルと一致していない、普及、早ければ2004年前のように送られた-キャプティブそしてバブリングタイプ。
現在のIEブラウザに加えて、他の主流のFirefox、オペラ、サファリ、すべては標準のDOMイベントモデルをサポートしています。IEはまだ、IEのイベント処理が効果的なクロスに共通しているだけでDOM標準を使用し、これはまた、開発者のために良いですが、自分自身のモデル、すなわちバブルタイプ、それはDOMを使用しているモデルの一部を使用しますブラウザ。
バブル型イベント（バブリング）
これは、IEブラウザのイベントモデルを達成されていますが、最も簡単には、少なくとも私は、より現実的な感じ、理解すること。バブルは、定義により、水の泡のようなイベントがトップになるまで、同じを取る必要があります。イベントは、ビューHTMLブラウザインターフェイス要素レベルの構成から最もを決定するために、従属関係を有するターゲット要素となっていることが理解され、DOMツリー構造から理解、イベントは、リーフノードまでのルートノードの祖先まで渡され最も不確実な要素をターゲットに配信。
キャプチャ型イベント（キャプチャ）
直感的に理解し、それが必要としているので、理解することが少しハードバブルタイプ、最も正確な要素までDOMツリーから一番上の要素、イベントの開発者のためのモデル（または少なくとも私...）と正反対であるNetscape Navigatorを達成タイプをバブリング、イベント、すなわち要素開始イベントが発生し、ほとんどの決定要素により送達されなければなりません。
しかし、このモデルは、いくつかのケースでは、次の説明になりますも便利です。
DOM標準イベントモデル
2つの異なるモデルがその利点と解釈を持っているので、DOM標準は、気泡トラップタイプをサポートしており、モデルはそれらの両方の組み合わせであると言うことができます。これは、イベントハンドラDOMエレメントの複数の結合させることができ、処理関数内では、このキーワードがまだDOM要素が結合さを指して、さらに第1の位置ハンドラは、イベントオブジェクトのイベント引数リストを渡します。
最初は、泡タイプの搬送に続いてキャッチ転送イベント、ですので、ハンドラの両方に登録したリスナーキャプティブイベント、およびタイプをバブリングイベントリスナーを登録した場合、それはDOMイベントモデルに二回呼び出されます。
プログラム上の誰もが、ウェブのフロントエンドに興味を持って、業界の友人の深い理解に、計画を学ぶために勉強したい場合は、私たちは、フロントエンドの学習バックルqunを追加することができます：784783012人の友人を、あなたは私が歓迎している、学生であるか、切り替えたいかどうか、ではありません誰もが共有するために定期的に乾燥し、Webフロントエンドを終えた2019年最新の学習教材と0の基本チュートリアルを共有：学習前、我々は真剣に考えています
登録して、イベントリスナーを削除します
イベントは、イベント処理を実行するためにリッスンブラウザ要素のコールバック関数を発生したときに、また、サブスクリプションまたはイベントとして知られているイベントリスナーを、登録します。主流のブラウザには二つの方法が、他のは、DOMの標準である、1は、IEブラウザで、イベントを登録しています。
1.メソッドが直接取り付けまたはHTML JS
<``**div** onclick``=``"alert(this.innerHTML);"``>
element.onclick = **function**``(){alert(``**this**``.innerHTML);}
NULが可能にイベントプロパティを削除すると、これが最も一般的な方法であり、長所と短所も明らかです。
- HTMLで簡単な、直接描画ハンドラのコードブロック、JSでイベントをすることができ、対応する要素に割り当てられた属性
- IEやDOMの規格のための方法は、IEでそれをサポートし、DOMの標準規格と呼ばれるイベントをバブリングする過程にあります。
- イベントハンドラに登録要素を参照することができ、この直接使用をブロック
- 複数のリスナーを登録要素を与え、この方法は、最大使用することはできません
2. IE下で除去し、複数のイベントリスナーとリスナーメソッドを登録します
IEブラウザのHTML要素は、例えば、複数のイベントリスナーの要素外attachEventアプローチ登録を可能にしています、
element.attachEvent(``'onclick'``, observer);
attachEventは、2つのパラメータを受け入れます。最初のパラメータはイベント名で、2番目のパラメータは、観測者のコールバックハンドラです。IEは、これは、ウィンドウオブジェクトであり、なぜIE、私は非常に疑問に思う、attachEvent登録ハンドラの呼び出しを使用して隣の要素にこれはもはや点であり、間違った場所がしばしばあり、ここでは、以前に登録されたイベントを説明しないしなければなりません私は嘘のメリットが表示されません。
以前に登録されたイベントリスナーを削除するには、同じパラメータにdetachEventのmethod要素を呼び出します。
element.detachEvent(``'onclick'``, observer);
3. DOMの標準下で除去し、複数のイベントリスナーとリスナーメソッドを登録します
DOMは異なり、標準のブラウザとIEブラウザに登録要素のイベントリスナーを達成、それは、ハンドリング登録バブリングタイプのイベントの両方をサポートする、addEventListenerメソッド要素により登録されたイベント処理や捕虜をサポート。
element.addEventListener(``'click'``, observer, useCapture);
addEventListenerメソッドは、3つのパラメータを取ります。2番目のパラメータは、コールバックハンドラオブザーバである;最初のパラメータは、さまざまなイベントIE名は、イベントの名前が「オン」の始まりではないところと指摘され、イベントの名前である3番目のパラメータは、コールバックプロセスを述べます関数は、キャプチャ段階、またはバブリング段階が呼び出された転送処理の際に呼び出されます
、パラメータ変更せずにremoveEventListenerの要素を呼び出すことができます登録されたイベントリスナーを削除します。
element.removeEventListener(``'click'``, observer, useCapture);
登録して、要素クロスブラウザイベントリスナープログラムを削除します
標準および登録IE DOM要素のイベントリスナーの間の類似点と相違点を把握した後、あなたはクロスブラウザを達成し、登録済みのイベントリスナープログラムの要素を削除することができます。
`01.``//注册`
`02.``**function**` `addEventHandler(element, evtName, callback, useCapture) {`
`03.``//DOM标准`
`04.``**if**` `(element.addEventListener) {`
`05.``element.addEventListener(evtName, callback, useCapture);`
`06.``}` `**else**` `{`
`07.``//IE方式,忽略useCapture参数`
`08.``element.attachEvent(``'on'` `+ evtName, callback);`
`09.``}`
`10.``}`
`11.``//移除`
`12.``//注册`
`13.``**function**` `removeEventHandler(element, evtName, callback, useCapture) {`
`14.``//DOM标准`
`15.``**if**` `(element.removeEventListener) {`
`16.``element.removeEventListener(evtName, callback, useCapture);`
`17.``}` `**else**` `{`
`18.``//IE方式,忽略useCapture参数`
`19.``element.dettachEvent(``'on'` `+ evtName, callback);`
`20.``}`
`21.``}`
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
転送イベントブラウザイベントはブラウザを通過した後、デフォルトの処理をキャンセルする方法
イベント配信ブラウザのイベントの配信をキャンセルするデフォルトの処理命令は、2つの異なる概念である後、多くの学生が友人に伝えることができなかった、または二つの概念は存在しませんでした。
イベントタイプまたはさらなる転写バブリング型イベントをキャプチャを停止、イベント配信手段を取り消します。例えば上記、イベント配信バブリング型イメージ、イベント配信処理は、本体の後停止し、上部ドキュメントイベントリスナーに位置もはや処理されていない通知を受け取ります。
イベント配信手段のデフォルトの処理の後、通常のイベントブラウザに配信され（そのようなアクションが存在する場合）、イベントに関連付けられたデフォルトのアクションを実行対処。フォームの入力タイプ属性が「提出」されている場合、それは自動的に完全にブラウザイベント伝播クリックしてフォームを送信します。別の例として、入力のKeyDownイベント要素と処理の発生は、ブラウザは、ユーザによって入力された文字をデフォルトになり、自動的に入力された要素の値に加算されます。
ブラウザの転送片をキャンセルするには、IEとDOM基準が異なっています。
IEでは、cancelBubbleにイベントオブジェクトを設定することにより、真です。
1.``**function** someHandle() {
2.``window.event.cancelBubble = **true**``;
3.``}
stopPropagation（）メソッドを呼び出すことで、DOM標準のイベントオブジェクトには、することができます。
1.``**function** someHandle(event) {
2.``event.stopPropagation();
3.``}
いくつかあるので、クロスブラウザのイベントの配信を停止する方法があります。
1.``**function** someHandle(event) {
2.``event = event || window.event;
3.``**if**``(event.stopPropagation)
4.``event.stopPropagation();
5.``**else** event.cancelBubble = **true**``;
6.``}
イベントをキャンセルする納入後のデフォルト処理では、IEとDOMの規格は違いはありません。
IEでは、イベントオブジェクトのReturnValueを設定することにより、偽です。
1.``**function** someHandle() {
2.``window.event.returnValue = **false**``;
3.``}
イベントのpreventDefault（）を呼び出すことによってオブジェクトへのDOMの標準的な方法。
1.``**function** someHandle(event) {
2.``event.preventDefault();
3.``}
いくつかあるので、クロスブラウザのイベント配信のデフォルトの後処理方法はキャンセルされます。
1.``**function** someHandle(event) {
2.``event = event || window.event;
3.``**if**``(event.preventDefault)
4.``event.preventDefault();
5.``**else** event.returnValue = **false**``;
6.``}
キャプティブバブル型のイベントモデルとイベントモデルの応用
標準イベントモデルは、2つのオプション、2つの異なるモデルを伝えるので、どのような利点が私の友人の多くを提供してくれ、なぜ単にモデルを採用していません。
ここではさておきIEブラウザ（IEのみ、選択の余地）どのような状況下で、イベントモデルのフィット感を議論します。
1.キャプチャータイプのアプリケーション
最も不正確な祖先要素によって提供さキャプティブイベントは、イベント要素、配信方法およびグローバルショートカットオペレーティング・システムと同様のアプリケーションのショートカットの最も正確な源となっています。システムがグローバルショートカットリスナーを登録されている場合、システムキーの組み合わせが発生したとき、イベントは第1オペレーティングシステム層に捕捉される、グローバル・リスナーは、まずグローバル第1の利得制御されており、アプリケーションのショートカットリスナに通知します右、それはさらに、転送イベントを防止する権利を有します。したがって、グローバルスコープとして使用するのに適したキャプティブリスナーイベントモデルは、ここで接続点とすべての子孫ノードによって形成されるセットトップ接合部の特定の範囲に関して、世界全体の反対です。
たとえば、あなたは文書と文書ノードの下のすべての子ノードに対するグローバルclickイベントリスナーを、作りたい、それが一定の条件の下で、すべての子ノードが無効なクリックが、この場合、バブルモデルが解決されないことを必要とし、キャプチャの種類は次のようにトップレベルのノードで捕虜イベントリスナー、擬似コードを追加することができ、非常に適しています。
`2.``**if**``(canEventPass ==` `**false**``) {`
`3.``//取消事件进一步向子结点传递和冒泡传递`
`4.``event.stopPropagation();`
`5.``//取消浏览器事件后的默认执行`
`6.``event.preventDefault();`
`7.``}`
`8.``}`
canEventPass条件がfalseの場合、結果として、文書のすべての子ノードクリックイベント登録は、ブラウザを処理されません。
2.泡タイプのアプリケーション
我々は通常、このモデルはIEのみをサポートしているため、イベントモデルをバブリングしている使用することを言うことができます。ここでは、まだモデルの適切な使用でスクリプトのパフォーマンスを向上させることができ、について話しています。さらに定義する必要はない場合れるonmousemoveは、onmouseover属性、れるonmouseout、イベントハンドラが渡されるイベントのいくつかの要素で、あなたは大胆にそれをキャンセルすることができ、頻繁にトリガ。また、親も除去するためにさらにサブノードのリスナーを通過した場合に禁止されるべきである負の影響を処理する子ノード層リスナーイベントリスナーに対処する必要があろう。
総合的ケーススタディ
最後に、以下の分析のためのHTMLコード：
01.``<``**body** onclick``=``"alert('current is body');"``>
02.``<``**div** id``=``"div0" onclick``=``"alert('current is '+this.id)"``>
03.``<``**div** id``=``"div1" onclick``=``"alert('current is '+this.id)"``>
04.``<``**div** id``=``"div2"``>
05.``<``**div** id``=``"event_source"
06.``onclick``=``"alert('current is '+this.id)"
07.``style``=``"height:200px;width:200px;background-color:red;"``>
08.``</``**div**``>
09.``</``**div**``>
10.``</``**div**``>
11.``</``**div**``>
12.``</``**body**``>
HTMLを実行した後、最内層から渡されたイベントバブリングをしていたときにハンドラが呼び出されたリスニングHTMLに直接書き込まれ、上記の手順に従って、DOM標準またはIEの両方をDIVの最内層であるレッドゾーンを、クリックしてください転送に、それがされています
現在はevent_source IS
電流Is DIV2
現在はDIV1 IS
DIV0電流が
、電流が体であり、
次のコードを追加します。
1.``**var** div2 = document.getElementById(``'div2'``);
2.``addEventHandler(div2, 'click'``, **function**``(event){
3.``event = event || window.event;
4.``**if**``(event.stopPropagation)
5.``event.stopPropagation();
6.``**else** event.cancelBubble = **true**``;
7.``}, **false**``);
ときにあなたがそうDIV2上位要素が通知を受けていない、配信を停止するイベント配信DIV2の後、バブルバブルアップ中に、上記の指示に従って、レッドゾーンをクリックし、登場しています。
現在はIS event_source
現在はDIV2 IS
サポートDOM標準的なブラウザでは、次のコードを追加します。
1.``document.body.addEventListener(``'click'``, **function**``(event){
2.``event.stopPropagation();
3.``}, **true**``);
上記のコードリスナー関数は場合キャプティブ転送と呼ばれるので、レッドゾーンをクリックし、イベントソースがevent_source要素のIDであるが、キャプティブ選挙が経過し、先頭から開始しても、本体ノード監視機能は、最初にされているため体はそれだけで現在になり、呼び出し、イベントがさらに受け継がキャンセル