jqueryのようなWrite Less Lote Do Do Do Frameworkを使用すると、必然的にネイティブJSが得意ではないでしょう。
Xiaocaiは実際にこのブログを書きたくありませんが、非常に初歩的なようですが、インターネット上のネイティブJSイベントの拘束力と解体を説明することさえできないことを見て、彼女はいくつかの一般的な科学を作ることにしました。
まず第一に、Xiaocaiはあまり知りません。私のアイデアをあなたと共有するだけです。
DOM0イベントモデル
イベントモデルは常に進化しており、初期のイベントモデルはDom0レベルと呼ばれます。
すべてのブラウザでサポートされているDOM0イベントモデル。
イベント名をDOMオブジェクトに直接登録することは、次のようなDOM0ライティング方法です。
コードコピーは次のとおりです。
document.getElementById（ "test"）。onclick = function（e）{};
オンクリックイベントを登録することを意味します。もちろん、それはこの執筆と同じ意味を持っています：
コードコピーは次のとおりです。
document.getElementById（ "test"）["onmousemove"] = function（e）{};
これは何もありません。JSオブジェクトプロパティにアクセスする2つの方法にすぎません。 []の形式は、主に属性名が法的識別子ではないという問題を解決することです。たとえば、Object.123はエラーを報告する必要がありますが、Object ["123"]はこの問題を回避します。同時に、[]の執筆もJS Aliveを書き込み、文字列を使用して属性名を表します。これは、実行時にイベントを動的にバインドできます。
ポイントに戻ると、イベントがトリガーされると、パラメーターEがデフォルトで渡され、イベントオブジェクトを表します。 Eを介して、クリックの座標、イベントを特異的にトリガーしたDOM要素など、多くの有用な情報を取得できます。
Dom0イベントに基づいて、同じDOMノードの場合、登録できるのは1つだけで、後で登録された同じイベントが以前の登録済みのイベントをオーバーライドします。例えば：
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
btn.onmousemove = function（e）{
アラート（ "ok"）;
};
btn ["onmousemove"] = function（e）{
アラート（ "ok1"）;
};
結果はOK1を出力します。
次にこれについて話しましょう。イベントがトリガーされると、これはイベントがトリガーされるDOMオブジェクトを指します。例えば：
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
btn.onmousemove = function（e）{
アラート（this.id）;
};
結果はテストを出力します。イベントはIDテストでDOMノードに登録されているため、イベントがトリガーされると、これはもちろんこのDOMノードを表します。このイベントはこのDOMノードによって呼び出されていることを理解できます。
したがって、イベントをキャンセルするのは非常に簡単です。たとえば、イベントをもう一度登録してnullに値を設定するだけです。
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
btn.onclick = function（e）{
アラート（ "ok"）;
};
btn.onclick = null;
原則は、最後の登録イベントが前のイベントを上書きしなければならないということです。最後の登録イベントをNullに設定します。これにより、イベントが解除されます。
問題はまだ終わっておらず、Dom0イベントモデルにはHTMLで直接記述されたイベントも含まれます。例えば：
コードコピーは次のとおりです。
<div id = "test" onclick = "exec（）;" > </div>
この方法で登録されたイベントは、カバレッジの原則にも従い、登録できるのは1つだけで、最後のイベントが有効になります。
違いは、このように登録されているイベントが関数を動的に呼び出すことと同等であるため、イベントオブジェクトは渡されません。同時に、これはウィンドウを指し、イベントをトリガーするDOMオブジェクトではなくなりました。
DOM2イベントモデル
Dom0と比較して、Shoucaは次の2つのポイントのみを理解しています。
dom2は、同じDOM要素を持つ複数の同じイベントの登録をサポートしています。
dom2は、キャプチャとバブルの概念を追加しました。
DOM2イベントは、AddEventListenerとRemoveEventListenerによって管理されます。もちろん、これが標準です。
ただし、IE8と次のブラウザは、対応するAttachEventおよびDetacheventを作成しています。 Xiaocaiは少し意図的ではないため、この記事では説明しません。
AddEventListenerはもちろん登録イベントです。つまり、「イベント名」、「イベントコールバック」、「キャプチャ/バブル」という3つのパラメーターがあります。例えば：
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
btn.addeventlistener（ "click"、function（e）{
アラート（ "ok"）;
}、 間違い）;
言うまでもなく、イベント名はそれほど多くありません。 DOM0と比較して、以前のONは削除されました。
イベントコールバックも理解しやすいです。イベントがトリガーされている場合は、通知する必要があります！ dom0のように呼び戻すと、デフォルトでイベントパラメーターが渡されます。同時に、これはイベントをトリガーするDOMノードを指します。
最後のパラメーターはブールタイプ、trueはキャプチャイベントを表し、falseはバブルイベントを表します。実際、理解しやすいです。最初に図を作成しましょう：
これは、要素がイベントをトリガーする場合、最初に通知されるのはウィンドウ、次にドキュメントであり、実際にイベントをトリガーする要素（ターゲット要素）まで順番に進むことを意味します。このプロセスはキャプチャです。次に、イベントはターゲット要素から泡立ち、ウィンドウオブジェクトまで順番に終了します。このプロセスはバブルです。
なぜこのように設計するのですか？これは、その深い歴史的起源によるものであるように思われるので、Xiaocaiはそれについてあまり知らないので、彼女はナンセンスについては話しません。
これから、キャプチャイベントがバブルイベントの前にトリガーされることがわかります。
そのようなHTML構造があるとします：
コードコピーは次のとおりです。
<div id = "test">
<div id = "testinner"> </div>
</div>
次に、外側のDIVで2回クリックイベント、つまりキャプチャイベントとバブリングイベントを登録します。コードは次のとおりです。
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
//イベントをキャッチします
btn.addeventlistener（ "click"、function（e）{
アラート（ "ok1"）;
}、 真実）;
//バブルイベント
btn.addeventlistener（ "click"、function（e）{
アラート（ "ok"）;
}、 間違い）;
最後に、内側のDivをクリックし、最初にOK1をポップアップしてから、OKをポップアップします。上記の概略図と組み合わせて、外側のdivは図の体と同等であり、内側のdivは図の下部divと同等であり、キャプチャイベントが最初に実行され、次にバブルイベントが実行されることを証明します。
なぜ内側のdivをクリックすることを強調するのですか？イベントを実際にトリガーするDOM要素は内側の層からでなければならず、外側の層DOM要素は、概略図から見ることができるイベントやバブルイベントをシミュレートしてキャプチャする機会があるためです。
実際にイベントをトリガーするDOM要素にキャプチャイベントとバブルイベントを登録した場合はどうなりますか？
HTML構造は上記と同じであり、JSコードは次のとおりです。
コードコピーは次のとおりです。
var btninner = document.getElementById（ "Testinner"）;
//バブルイベント
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok"）;
}、 間違い）;
//イベントをキャッチします
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok1"）;
}、 真実）;
もちろん、内側のdivをクリックすると、結果は最初にポップアップし、次にOK1が表示されます。理論的には、キャプチャイベントを最初にトリガーする必要があります。つまり、OK1が最初にポップアップしますが、ここでは特別です。実際にイベントをトリガーするイベントを登録するため、図のDIVに登録するのに相当します。図から、実際にイベントをトリガーするDOM要素がキャプチャイベントのエンドポイントであり、バブルイベントの出発点であることがわかります。そのため、ここでイベント間に区別はありません。どれが最初に登録され、どれが最初にどれを実行しますか。この例では、バブルイベントが最初に登録されるため、最初に実行されます。
この原則は、同じ種類の複数のイベントに適用されます。たとえば、3つのバブルイベントが一度に登録されている場合、実行命令は登録、最初の登録、および最初の実行の順序で行われます。例えば：
コードコピーは次のとおりです。
var btninner = document.getElementById（ "Testinner"）;
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok"）;
}、 間違い）;
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok1"）;
}、 間違い）;
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok2"）;
}、 間違い）;
結果は、もちろんOK、OK1、およびOK2ポップアップが順番になりました。
イベントモデルをさらに理解するために、別のシナリオがあります。外Divと内部divが同時にキャプチャイベントを登録する場合、内側のdivをクリックすると、最初に外側のdivイベントをトリガーする必要があります。コードは次のとおりです。
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
var btninner = document.getElementById（ "Testinner"）;
btninner.addeventlistener（ "click"、function（e）{
アラート（ "ok"）;
}、 真実）;
btn.addeventlistener（ "click"、function（e）{
アラート（ "ok1"）;
}、 真実）;
その結果、OK1が最初にポップアップします。
外側divと内部divの両方が登録されたバブルイベントである場合、内側のdivをクリックすると、内側のdivイベントを最初に実行する必要があり、原則は同じです。
慎重な読者は、Div Nestingの場合、内側のDivをクリックすると、外側のDivもイベントをトリガーすることがわかります。これは問題のようです。
クリックは明らかに内側のdivですが、外側のdivイベントもトリガーされています。これは実際に問題です。
実際、イベントがトリガーされると、イベントオブジェクトがデフォルトで渡されます。前述のように、このイベントオブジェクトには、StopPropagationにメソッドがあります。この方法により、バブルを防ぐことができ、外側のdivがイベントを受け取らないようにします。コードは次のとおりです。
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
var btninner = document.getElementById（ "Testinner"）;
btn.addeventlistener（ "click"、function（e）{
アラート（ "ok1"）;
}、 間違い）;
btninner.addeventlistener（ "click"、function（e）{
//バブルを停止します
e.StopPropagation（）;
アラート（ "ok"）;
}、 間違い）;
最後に、事件を解決する方法について話さなければなりません。 Unevent Syntax：btn.removeeventlistener（ "event name"、 "event callback"、 "capture/bubble"）;
これは、詳細に説明されているように、バインディングイベントのパラメーターと同じです。
eventイベントの名前は、イベントをキャンセルすることを意味します。
・イベントコールバックは関数であり、イベントを登録する関数と同じでなければなりません。
・イベントタイプ、ブール値、これはイベントが登録されているときにタイプと一致する必要があります。
言い換えれば、名前、コールバック、タイプは一緒に、キャンセルするイベントを決定することは不可欠です。例えば：
コードコピーは次のとおりです。
var btn = document.getElementById（ "test"）;
//変数にコールバックを保存します
var fn = function（e）{
アラート（ "ok"）;
};
//バインディング
btn.addeventlistener（ "click"、fn、false）;
//除去
btn.removeeventlistener（ "click"、fn、false）;
登録されたイベントをキャンセルするには、コールバック機能を保存する必要があります。そうしないと、キャンセルすることはできません。
混合Dom0とDom2
物事はすでに非常に乱雑であり、これは複雑な使用であり、人々が生きることができます。 。 。
恐れないでください、それを混合して使用することは問題ありません。 Dom0モデルとDom2モデルはそれぞれ独自のルールに従い、互いに影響を与えません。
全体として、最初に登録され、最初に実行される場合、他に何もありません。
ポストスクリプト
この時点で、ネイティブJSイベントはほぼ終了しました。 Xiaocaiはこれを知っているだけです。読者は他の知識ポイントを追加できます。
実際のアプリケーションでは、実際の専門家はそれほど多くのイベントを愚かに登録することはありません。一般的に、イベントを最も外側のDOM要素に登録し、キャプチャとバブルメカニズムを使用して、実際にイベントをトリガーするDOM要素を見つけ、最後にイベントをトリガーするDOM要素によって提供される情報に基づいてコールバックを呼び出す必要があります。
言い換えれば、専門家は、ブラウザを管理するためにブラウザに依存することなくイベント自体を管理します。これにより、効率が向上し、互換性を確保できます。これはjQueryがしていることではありませんか？
さて、チュートリアルはここで終わります、私はそれが読者に役立つことを願っています！