JavaScriptイベントbubble_javascriptスキルの詳しい説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptイベントbubble_javascriptスキルの詳しい説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

javascript イベントバブリング

イベントは JavaScript の中心的なコンテンツの 1 つです。イベントの適用にはイベントバブリングという重要な概念が必然的に含まれます。イベントバブリングを紹介する前に、もう 1 つの重要な概念であるイベントフローを紹介します。
1. イベントフローとは: ドキュメントオブジェクトモデル (DOM) はツリー構造であり、次の図で明確に表すことができます。

HTML 要素がイベントをトリガーすると、イベントは DOM ツリー内のトリガーノードとルートノードの間で特定の順序で伝播され、通過するすべてのノードがトリガーされたイベントを受け取ります。一連の出来事。イベントは伝播の順序に従って 2 つのカテゴリに分類でき、1 つはイベントバブリング、もう 1 つはイベントキャプチャであり、この章で紹介するトピックが関係します。

1. イベントバブリング: いわゆるタイムバブリングとは、要素がイベントをトリガーすると、イベントがバブルのようになり、トリガー要素からすべての親ノードに伝播し、対応するルートノードまでイベントが受信されることを意味します。親要素のハンドラー関数にイベントが登録されている場合、子ノードでイベントがトリガーされた場合でも、親要素に登録されているイベントハンドラー関数もトリガーされます。たとえば、上の図では、a 要素の onclick イベントがトリガーされると、その親要素である p、document、および window がすべてこのイベントを受け取り、時間処理関数が対応する親要素に登録されている場合、このイベント処理関数が実行されます。コード例を見てください:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

上記のコードの目的は、対応するセルがクリックされたときに、対応するセルのコンテンツをポップアップすることです。ただし、上記の実装では、onclick イベントハンドラーはセルごとに登録されません。代わりに、onclick イベントハンドラーがセルの親要素テーブルに登録され、セルがクリックされると、onclick イベントがトリガーされます。また、イベントオブジェクトから上に伝播し、テーブル要素にはたまたま onclick イベントハンドラーが登録されています。もちろん、このハンドラーは、イベントオブジェクトのパラメーターを渡す問題がここで設定されます。すべてのブラウザはイベントバブリングをサポートしています。 2. イベントキャプチャ:

イベントキャプチャは、イベントバブリングの逆です。要素がクリックされたとき、IE では、通常、デフォルトで、ルート要素からトリガー要素への伝播がサポートされません。バブルイベント処理モデル。

2.javascriptはイベントのバブリングコードを防止しますイベントのバブリングは特定のシナリオでは非常に便利ですが、場合によっては防止する必要がある場合があります。イベントのバブリングを防止するために、すべての主要なブラウザーと互換性のあるコード例を示します。
コード例:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

ログイン後にコピー

上記のコードにより、イベントのバブリングを防ぐことができます。コードに関する簡単なコメントを次に示します。

2. コードのコメント:

1. 関数 stopBubble(e) {}。この関数はイベントのバブリングを防ぐために使用され、パラメーターはイベントオブジェクトです。
2. if(e&&e.stopPropagation){e.stopPropagation();}、stopPropagation がサポートされているかどうかを判断し、サポートされている場合は e.stopPropagation() を使用します。 stopPropagation() 関数は、IE10 および IE10 より前のブラウザではサポートされていません。
3.window.event.cancelBubble=true、現在の IE ブラウザはこれを使用してイベントのバブリングを防ぎます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7367

Java チュートリアル

1628

CakePHP チュートリアル

1354

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

イベントのバブリングメカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか? Jan 13, 2024 pm 02:55 PM

イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"

jsのクリックイベントが繰り返し実行できない理由 May 07, 2024 pm 06:36 PM

JavaScript のクリックイベントは、イベントバブリングメカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。イベントキャプチャを使用する: イベントがバブルアップする前に起動するイベントリスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベントリスナーを再度トリガーします。

イベントのバブリングが 2 回トリガーされるのはなぜですか? Feb 22, 2024 am 09:06 AM

イベントのバブリングが 2 回トリガーされるのはなぜですか?イベントバブリング (イベントバブリング) とは、DOM において、要素がイベント (クリックイベントなど) をトリガーすると、イベントがその要素から親要素にバブルアップし、最後に最上位のドキュメントオブジェクトにバブルアップすることを意味します。イベントバブリングは DOM イベントモデルの一部であり、これにより開発者はイベントリスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリングメカニズムを通じてイベントをキャプチャして処理できます。ただし、開発者は、バブルして 2 回トリガーされるイベントに遭遇することがあります。

jQuery .val() が失敗する理由と解決策 Feb 20, 2024 am 09:06 AM

タイトル: jQuery.val() が失敗する理由と解決策フロントエンド開発では DOM 要素の操作に jQuery がよく使われますが、フォーム要素の値の取得や設定には .val() メソッドが広く使われています。ただし、.val() メソッドが失敗し、フォーム要素の値を正しく取得または設定できない状況が発生することがあります。この記事では、.val() エラーの原因を調査し、対応する解決策を提供し、具体的なコード例を添付します。 1.原因分析.val()メソッド

vue のイベント修飾子はどのようなシナリオに使用できますか? May 09, 2024 pm 02:33 PM

Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。デフォルト動作の防止 (.prevent) イベントバブリングの停止 (.stop) ワンタイムイベント (.once) イベントのキャプチャ (.capture) パッシブイベントリスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)

バブルアップしない JS イベントはどれですか? Feb 19, 2024 pm 09:56 PM

JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する

イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析 Feb 20, 2024 pm 05:27 PM

イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析イベントバブリングは Web 開発における重要な概念であり、ページ上でイベントを配信する方法を定義します。要素上のイベントがトリガーされると、イベントは最も内側の要素から送信され、最も外側の要素に渡されるまで外側に渡されます。この配信方法は水の中で泡が泡立っているようなものなので、イベントバブリングと呼ばれます。この記事では、イベントのバブリングのメカニズムを詳しく分析します。イベントバブリングの原理は、簡単な例を通して理解できます。 H があるとします。

バブルアップしない JS イベントは何ですか? Feb 18, 2024 pm 06:31 PM

バブルアップしない JS イベントは何ですか? JavaScript は、Web ページに対話性とダイナミクスを追加する強力なスクリプト言語です。 JavaScript では、イベント駆動型プログラミングは非常に重要な部分です。イベントとは、ボタンのクリック、マウスの動き、キーボード入力など、Web ページ上でユーザーが実行するさまざまな操作を指します。 JavaScript は、イベント処理関数を通じてこれらのイベントに応答し、対応する操作を実行します。イベントバブリングは、イベント処理中の一般的なメカニズムです。イベントのバブリングとは、

See all articles