JavaScript イベント_JavaScript スキルに関する簡単な説明

WBOY
リリース: 2016-05-16 16:12:36
オリジナル
1056 人が閲覧しました

1. イベントの流れ

イベント フローは、ページからイベントを受信する順序を説明します。ただし、IE が提案するのはバブリング ストリームですが、Netscape Communicator はキャプチャ ストリームを提案します。
JavaScript イベントストリーム

2. イベントバブリング

イベントは、最初に最も具体的な要素 (最も深いネスト レベルを持つノード) によって受信され、次に、より具体的ではないノード (ドキュメント) に上方に伝播します。以下のように:

コードをコピーします コードは次のとおりです:


<頭>
                                                                                                                                                                                                                       


クリックしてください



window.onload = function(){
var obj = document.getElementById("テスト");
obj.onclick = function(){
アラート(this.tagName);
};
Document.body.onclick = function(){
アラート(this.tagName);
};
Document.documentElement.onclick = function(){
アラート(this.tagName);
};
Document.onclick = function(){
アラート("ドキュメント");
};
window.onclick = function(){
alert("ウィンドウ");
}
};

イベント伝播シーケンス: div——>body——>html——>document

注:

最新のブラウザはすべてバブリング イベントをサポートしていますが、実装にはいくつかの違いがあります。 IE5.5 以前のバージョンのイベント バブリングは、本文からドキュメントに直接ジャンプします (html は実行されません)。 Firefox、Chrome、および Safari は、イベントをウィンドウ オブジェクトまでバブルします。

3. イベントのバブリングを停止し、デフォルトのイベントをキャンセルします

a. イベントオブジェクトを取得します

コードをコピーします コードは次のとおりです:
関数 getEvent(event) {
// window.event IE
// IE 以外のイベント
イベントを返す || window.event;
}

b 機能: イベントバブリングを停止

コードをコピーします コードは次のとおりです:
関数 stopBubble(e) {
// イベント オブジェクトが提供されている場合、これは非 IE ブラウザです
if ( e && e.stopPropagation ) {
// したがって、W3C の stopPropagation() メソッドをサポートします
e.stopPropagation();
} else {
// それ以外の場合は、IE を使用してイベントのバブリングをキャンセルする必要があります
window.event.cancelBubble = true;
}
}

c. ブラウザのデフォルト動作をブロックします

コードをコピーします コードは次のとおりです:
function stopDefault( e ) {
// デフォルトのブラウザーアクションをブロックします (W3C)
If ( e && e.preventDefault ) {
e.preventDefault();
} else {
//IEで関数のデフォルト動作を防ぐ方法
window.event.returnValue = false;
}
false を返します;
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!