1。バブルイベント
ブラウザ用のイベントモデルには、イベントとバブルイベントのキャプチャモデルには2つのタイプがあります。 IEはキャプチャイベントをサポートしていないため、以下は主に説明としてバブルイベントを使用しています。
（バブルと呼ばれる）バブルタイプとは、最も具体的なイベントを1つずつトリガーする最も具体的なイベントに対するイベントを指します。
コードコピーは次のとおりです。
<body onclick = "add（ 'body <br>'）">
<div onclick = "add（ 'div <br>'）">
<ponclick = "add（ 'p <br>'）">私をクリックします</p>
</div>
</body>
<div id = "display">
</div>
<script type = "text/javascript">
関数add（stext）{
var ulo = document.getElementById（ "display"）;
ulo.innerhtml += stext;
}
</script>
上記の3つの関数がOnClick関数を追加しました。スタンドアロンP要素の後の3つの機能が発射されます。 P要素が最初に実行され、次にdivが実行され、最終的にボディが実行されます。
ここでは、キャプチャイベントのリマインダーがあり、その順序はバブルイベントの正反対です。
2。イベント監視
イベントでは、応答する機能が必要です。このタイプの関数は通常、イベントハンドラーと呼ばれます。別の観点から見ると、これらの機能は、通常イベントリスナーと呼ばれるイベントが発生するかどうかをリアルタイムで聞いています。イベントリスニング機能は、異なるブラウザではまったく異なります。
私。 OnClickメソッドの使用など、一般的なリスニング方法では、ほぼすべてのタグがこの方法をサポートしています。また、ブラウザの互換性は非常に高くなっています
行動、イベント分離を検討します。
通常、次の方法を使用して監視します
コードコピーは次のとおりです。
<body>
<div id = "me">クリック</div>
<script type = "text/javascript">
var opp = document.getElementById（ "me"）; //イベントが見つかりました
opp.onclick = function（）{//イベント関数を設定します
アラート（「私はクリックされました！」）
}
</script>
</body>
上記の両方の方法は非常に便利であり、いくつかの小さな機能を作成および処理する際に、Everbright開発者に愛されています。しかし、同じイベントのために。 pでマークされたonclick関数など、1つの関数のみを追加できます。どちらの方法でも1つの関数のみを持つことができます。したがって、IEには独自のソリューション、同僚、および標準DOMが別の方法を規定しています。
ii。 IEの監視方法
朝のブラウザでは、各要素には時間のリスニングを処理する2つの方法があります。
それぞれAttachEvent（）とDetachenevt（）です。
その関数名からわかるように、AttachEnevt（）はイベント処理を要素に追加するために使用される関数であり、Detachevent（）は要素上のリスニング関数を削除するために使用されます。それらの構文は次のとおりです。
[object] .Attachevent（ "enevt_handler"、 "fnhandler"）;
[object] .detachevent（ "enevt_handler"、 "fnhandler"）;
その中で、enevt_handlerは、一般的に使用されるonclick、onload、onmouseoverなどを表します。
fnhandlerはリスナー関数の名前です。
前のセクションでは、リスニング関数を追加する代わりに、AttachEvent（）メソッドを使用できます。クリックすると、Detachevent（）を使用してリスニング機能を削除して、次のクリック後に実行されないようにできます。
コードコピーは次のとおりです。
<script type = "text/javascript">
関数fnclick（）{
アラート（「クリックされました！」）;
op.detachevent（ "onclick"、 "fnclick"）;
}
var op;
window.onload = function（）{
op = document.getElementById（ "ooop"）; //オブジェクトを見つけます
Op.Attachevent（ "onclick"、 "fnclick"）; //リスナー関数を追加します
}
</script>
<div>
<p id = "ooop">
</p>
</div>
iii。複数のリスニングイベントを追加する（つまり）
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数fnclick1（）{
Alert（ "Fnclick1によってクリックされました"）;
}
関数fnclick2（）{
Alert（ "Fnclick2によってクリックされました"）;
//op.detachevent("onclick",fnclick1）; //リスナー関数1を削除します1
}
var op;
window.onload = function（）{
op = document.getElementById（ "myp"）; //オブジェクトを見つけます
Op.Attachevent（ "onclick"、fnclick1）; //リスナー関数を追加1
Op.Attachevent（ "onclick"、fnclick2）; //リスナー関数2を追加します
}
</script>
</head>
<body>
<div>
<p id = "myp">私をクリックします</p>
</div>
3。標準DOMイベント監視
IEの2つの方法では、標準DOMも2つの方法を使用して、それぞれリスナー機能を追加および削除します。つまり、addeventlistener（）およびremoveEventListener（）
IEとは異なり、これらの2つの関数は3つのパラメーター、つまりイベントの名前、割り当てられる関数の名前、およびバブルステージまたはキャプチャステージに使用されるかどうかを受け入れます。キャプチャ段階のパラメーターは真であり、バブルステージのパラメーターは偽です。構文は次のとおりです。
コードコピーは次のとおりです。
[object] .addeventlistener（ "event_name"、fnhandler、bcapture）;
[Object] .RemoveEventListener（ "event_name"、fnhandler、bcapture）;
これら2つの関数の使用方法は基本的にIEに似ていますが、IEの「オンクリック」と「オンマウスオーバー」ではなく、event_nameの名前は「クリック」と「オンマウスオーバー」ではなく「クリック」、「マウスオーバー」などであることに注意する必要があります。
さらに、3番目のパラメーターBcaptureは、通常、泡立つ段階でfalseに設定されます。
標準DOMイベントリスニング方法：
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数fnclick1（）{
Alert（ "Clicked 1"）;
Op.RemoveEventListener（ "Click"、fnclick1、false）;
}
関数fnclick2（）{
Alert（ "2をクリックした2"）;
}
window.onload = function（）{
op = document.getElementById（ "myp"）;
op.addeventlistener（ "click"、fnclick1、false）;
op.addeventlistener（ "click"、fnclick2、false）;
}
</script>
<div>
<p id = "myp">私をクリックします</p>
</div>
特定の実行順序をテストできます。
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。