イベントモニタリング
イベントモニタリングは、コンピュータにイベントの発生を待機させ、このイベントが発生した場合、マウスがボタンをクリックするのを待つ、クリックして新しいページが発生したときに開くなどの応答を行いますが、作成したモニタリングイベントはこれを検出しましたイベント終了後は、ジャンプできないようにブロックされます。
イベントの監視には、3つのクラスオブジェクトが含まれます
1.イベントが発生したEventSource（イベントソース）
2.イベント（イベント）：イベントは、インターフェイスコンポーネントで発生する特定のイベントをカプセル化します
3. EventListener（イベントリスナー）：イベントソースからのイベントの監視を担当します
イベント監視の使用法
1.同じオブジェクトが.onclickを使用して複数のメソッドをトリガーする場合、後者のメソッドは前のメソッドを上書きします。つまり、オブジェクトのonclickイベントが発生すると、最後にバインドされたメソッドのみが実行されます。イベントモニタリングでは、カバレッジはなく、バインドされたすべてのイベントが実行されます。
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.onclick = function(){
alert("第一个事件");
}
btn.onclick = function(){
alert("第二个事件");
}
btn.onclick = function(){
alert("第三个事件");
}
}
2.イベントリスナーを使用してオブジェクトメソッドをバインドした後、対応するバインドを解放できます。
var eventOne = function(){
alert("第一个监听事件");
}
function eventTwo(){
alert("第二个监听事件");
}
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
}
3.イベントのバインドを解除するときは、関数ハンドルを使用する必要があります。関数が書き込まれている場合、関数全体のバインドを解除することはできません。
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
イベントモデル
javascriptには、DOM0とDOM2の2つのイベントモデルがあります。
DOM0レベルのイベントモデルは初期のイベントモデルであり、すべてのブラウザでサポートされており、その実装は比較的簡単です。
<p id = 'click'>click me</p>
<script>
document.getElementById('click').onclick = function(event){
alert(event.target);
}
</script>
このイベントモデルは、イベント名をdomオブジェクトに直接登録するためのものです。このコードは、pタグにonclickイベントを登録し、イベント関数内にクリックターゲットを出力するためのものです。次のように、イベントの却下はさらに簡単です。つまり、nullをイベント関数にコピーします。
document.getElementById('click'_).onclick = null;
このことから、dom0では、同じタイプの関数を複数登録すると上書きが発生し、以前に登録した関数が無効になるため、domオブジェクトは同じタイプの関数を1つしか登録できないことがわかります。
DOM2レベルのイベントモデルは、イベントであるキャプチャおよびバブリングモデルです。最初にキャプチャしてから、
DOM2レベルの登録およびリリースイベントをバブリングする必要があります
。DOM2レベルでは、addEventListenerおよびremoveEventListenerを使用してイベントを登録およびリリースします。前の方法と比較したこの関数の利点は、domオブジェクトが、イベントカバレッジなしで、同じタイプの複数のイベントを登録し、各イベント関数を順番に実行できることです。