JavaScript のイベントフローの概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript のイベントフローの概要

coldplay.xixi

Feb 14, 2021 am 10:30 AM

javascript

JavaScript のイベントフローの概要

無料学習の推奨事項: js ビデオチュートリアル

# #JavaScript イベントフローについて

##前書き

#本文
#イベントとは何ですか?
- イベントとは何ですか?イベントストリーミング?
- イベントバブリングとイベントキャプチャ
- DOM イベント階層
- DOM0 イベント
- DOM2 イベント
結論

まえがき

この記事を読む前に、JavaScript イベントループについて見てみることをお勧めします。もちろん、既に知っている人向けです。必要ありません! この記事では、js のイベントフローについて説明します。

#本文

Web ページ上でクリックやスライドなどの特定の種類の操作を実行すると、対応するイベントがトリガーされることは誰もが知っています。。また、Web ページ全体が実際にはブラウザーによって DOM ツリーに解析されることもわかっています。ノードがイベントを生成すると、そのイベントはノードとルートノードの間で一定の順序で伝播され、この伝播経路を通過するすべてのノードがイベントを受信します。このプロセス全体を DOM イベントフロー ## と呼びます＃。

イベントとは何ですか?

js と html 間のやり取りは、実際には「イベント」を通じて実現されます。 Web ページ上のすべてのユーザーのクリック、選択、スライドなどは、JS の世界ではすべてイベントです。イベントの場合、イベントが発生するとレスポンスが必要ですが、js ではいわゆるレスポンスがリスナーです。オブザーバーパターンと同様に、イベントはサブジェクトであり、イベントが発生すると、イベント (サブジェクト) に対応するすべてのリスナーに、対応する応答を実行するように通知する必要があります。

イベントフローとは何ですか?

イベントフローは、ページからイベントを受け取る順序を記述します。主に次の 2 種類に分かれます。

IE のイベントバブリング

Netscape のイベントキャプチャ

イベントバブリング vs イベントキャプチャ

IE が提案するイベントフローモデルはイベントバブリングです。つまり、イベントは下から上に、ターゲットによってトリガーされた要素からドキュメントオブジェクトに至るまで、段階的に上向きに伝播します。

Netscape が提案したイベントフローモデルはイベントキャプチャであり、イベントバブリングとは逆に、上から下へ、つまりドキュメントオブジェクトからターゲットオブジェクトのステップに伝播します。一歩ずつ。

上記は、DOM0 標準におけるイベントフローの仕組みです。その後、ECMAScript によって DOM2 のイベントフローがさらに標準化されました。 DOM2 では、イベントに含まれるイベントストリームは次の 3 つのステージに分割されます。

イベントキャプチャステージ (capture)

ターゲットステージ (target)

イベントのバブリング段階 (バブル)
DOM イベントの分類

DOM ノードでイベントが発生したときは、当然のことながら、次のことを行う必要があります。

このうち、より重要なものは DOM0/DOM2 であるため、以下ではそれらに焦点を当てて説明します。

DOM0 イベント

DOM0 レベルのイベントを実装するには、主に 2 つの方法があります。1 つ目は、関数名をイベント属性として直接使用するインラインモデルです。 htmlタグの属性値。次のとおりです:

// js code// eventDOM.jsfunction btnClick() {
    console.log('Hello World')}

ログイン後にコピー

<html> <head> <title>eventDOM demo</title> </head> <body> <p onclick="btnClick()" style="width: 30px; height: 30px; background-color:black"></p> <script type="text/javascript" src="eventDOM.js"></script> </body></html>
ログイン後にコピー
ただし、インラインモデルには明らかな欠点があります。つまり、コンテンツ (html) と動作 (js) の分離に関する W3C 要件に違反しています。 2 番目のタイプは、スクリプトモデル (動的バインディングモデル) です。具体的な方法は、js スクリプトを通じて特定の DOM ノードを選択し、そのノードにイベント属性と属性値を追加します。次のように:

// js code// eventDOM.jslet btn = document.getElementById('btn')let btnClick = function() {
    console.log('Hello World')}btn.onclick = btnClick

ログイン後にコピー

<!-- html code --><html>
    <head>
        <title>eventDOM demo</title>
    </head>
    <body>
        <p id="btn" style="width: 30px; height: 30px; background-color:black"></p>
        <script type="text/javascript" src="eventDOM.js"></script>
    </body></html>

ログイン後にコピー

をクリックすると、

Hello World

が表示されますが、問題ありません。上記の HTML コードに基づいて、次のように少し js を追加します:

// js code// eventDOM.jslet btn = document.getElementById('btn')let btnClick = function() {
    console.log('Hello World')}let btnClick2 = function() {
    console.log('Hello World again')}btn.onclick = btnClick
btn.onclick = btnClick2

ログイン後にコピー

これで、Hello World again をクリックした場合のみ表示されることがわかりました。したがって、スクリプトモデルでは、1 つのノードが同じタイプのイベントを 1 回追加することのみが許可され、後続のイベントは以前のイベントを上書きします。

最後に興味深い例を見てみましょう:<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><html> <head> <title>eventDOM demo</title> </head> <body> <p id="btn3" style="width: 400px; height: 400px; background-color:pink"> btn3 <p id="btn2" style="width: 300px; height: 300px; background-color:skyblue"> btn2 <p id="btn1" style="width: 200px; height: 200px; background-color:lightgreen"> btn1 </p> </p> </p> <script type="text/javascript" src="eventDOM.js"></script> </body></html></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// js code// eventDOM.jslet btn1 = document.getElementById('btn1')let btn2 = document.getElementById('btn2')let btn3 = document.getElementById('btn3')btn1.onclick = function() { console.log('1')}btn2.onclick = function() { console.log('2')}btn3.onclick = function() { console.log('3')}</pre><div class="contentsignin">ログイン後にコピー</div></div>

btn3 をクリックすると、出力は次のようになります:

これは期待どおりですが、btn1 をクリックするとどうなりますか? 出力は次のようになります:

これは少し奇妙です。btn1 には明らかに 1 つのリスナーを追加しただけですが、btn2 と btn3 と一緒に追加したように感じるのはなぜですか? 理由は、DOM0 には 2 つのモデルがあるためです: IE によって提案されたイベントバブリングと、 Netscape によって提案されたイベントキャプチャですが、実際には DOM0 はイベントバブリングのみをサポートしています。したがって、btn1 をクリックした場合のイベントフローは次のようになります。

つまり、イベントフローは btn2 と btn3 も通過するため、それらのイベント処理がトリガーされます。しかし、明らかに、これは私たちが望んでいる結果ではありません。

DOM2 イベント

さらに詳細に指定すると、DOM2 レベルのイベントハンドラーが存在します。 2 つのメソッドが定義されています。

addEventListener() イベントリスナーの追加
removeEventListener() イベントリスナーの削除

これら 2 つの関数次の表:

#パラメータタイプ説明## eventscallbackuseCapture#Boolean(default:false)イベントがキャプチャフェーズで処理されるかどうか

DOM2 中就可以對同一個節點綁定兩個以上的同類型事件監聽器了，看看下面例子:

<!-- html code --><html>
    <head>
        <title>eventDOM demo</title>
    </head>
    <body>
        <p id="btn" style="width: 200px; height: 200px; background-color:lightgreen"></p>
        <script type="text/javascript" src="eventDOM.js"></script>
    </body></html>

ログイン後にコピー

// js code// eventDOM.jslet btn = document.getElementById('btn')function hello() {
    console.log("Hello World")}function helloAgain() {
    console.log("Hello World again")}btn.addEventListener('click', hello, false)btn.addEventListener('click', helloAgain, false)

ログイン後にコピー

輸出如下:

解決了 DOM0 只能綁定一個同類型事件監聽器的缺點啦!值得注意的是，如果綁定同樣的監聽器兩次以上，仍然只會觸發一次。

再回到上面三個 p 的那個例子進行改寫如下:

<!-- html code --><html>
    <head>
        <title>eventDOM demo</title>
    </head>
    <body>
        <p id="btn3" style="width: 400px; height: 400px; background-color:pink">
            btn3            <p id="btn2" style="width: 300px; height: 300px; background-color:skyblue">
                btn2                <p id="btn1" style="width: 200px; height: 200px; background-color:lightgreen">
                    btn1                </p>
            </p>
        </p>
        <script type="text/javascript" src="eventDOM.js"></script>
    </body></html>

ログイン後にコピー

// js code// eventDOM.jslet btn1 = document.getElementById('btn1')let btn2 = document.getElementById('btn2')let btn3 = document.getElementById('btn3')btn1.addEventListener('click', function() {
    console.log('1')}, true)btn2.addEventListener('click', function() {
    console.log('2')}, true)btn3.addEventListener('click', function() {
    console.log('3')}, true)

ログイン後にコピー

注意，這邊我們把 addEventListener 的第三個參數設為 true，也就是事件會在捕獲階段觸發。點擊 btn1 輸出如下:

看到順序與 DOM0 的順序反過來了。首先最外層(btn3)的節點先被觸發了，而因為第三個參數被設為 true，事件會在捕獲階段就被處理，所以輸出才會是 3,2,1。如果都是 false，就會是 1,2,3。

可見 DOM2 的事件處理機制有了更彈性的操作空間。我們也可以在不同階段綁定事件監聽器，看看下面例子:

<!-- 沿用上一段 html 代碼 -->

ログイン後にコピー

// js code// eventDOM.jsbtn1.addEventListener('click',function() {
    console.log('btn1 capture')}, true)btn1.addEventListener('click',function() {
    console.log('btn1 bubble')}, false)btn2.addEventListener('click',function() {
    console.log('btn2 capture')}, true)btn2.addEventListener('click',function() {
    console.log('btn2 bubble')}, false)btn3.addEventListener('click',function() {
    console.log('btn3 capture')}, true)btn3.addEventListener('click',function() {
    console.log('btn3 bubble')}, false)

ログイン後にコピー

點擊 btn1 輸出如下:

改變一下順序，如下:

<!-- 沿用上一段 html 代碼 -->

ログイン後にコピー

// js code// eventDOM.jsbtn1.addEventListener('click',function() {
    console.log('btn1 bubble')}, false)btn1.addEventListener('click',function() {
    console.log('btn1 capture')}, true)btn2.addEventListener('click',function() {
    console.log('btn2 bubble')}, false)btn2.addEventListener('click',function() {
    console.log('btn2 capture')}, true)btn3.addEventListener('click',function() {
    console.log('btn3 bubble')}, false)btn3.addEventListener('click',function() {
    console.log('btn3 capture')}, true)

ログイン後にコピー

點擊 btn1 輸出如下:

注意 btn1 的輸出。雖然捕獲階段先發生了，但是因為 btn1 本身就是目標節點，所以在這種情況下，總結出規律:在目標元素上不區分冒泡還是捕獲，是根據腳本中的順序來執行。

有時候，我們希望對於某節點，不要再經過冒泡階段了，DOM2 也提供了相應函數，stopPropagation。

<!-- 沿用上一段 html 代碼 -->

ログイン後にコピー

// js code// eventDOM.jsbtn1.addEventListener('click',function() {
    console.log('btn1 capture')}, true)btn1.addEventListener('click',function() {
    console.log('btn1 bubble')}, false)btn2.addEventListener('click',function(e) {
    e.stopPropagation()
    console.log('btn2 capture')}, true)btn2.addEventListener('click',function() {
    console.log('btn2 bubble')}, false)btn3.addEventListener('click',function() {
    console.log('btn3 capture')}, true)btn3.addEventListener('click',function() {
    console.log('btn3 bubble')}, false)

ログイン後にコピー

點擊 btn1 輸出如下:

可以看到，因為我們在 btn2 的捕獲階段就阻止了 btn2 的冒泡階段，所以 btn2 在捕獲後就不再繼續執行下去，確保不會冒泡，事件流如下:

加強一下前面提到的知識點，如果是在 btn1 阻止冒泡，會變成怎樣呢?

<!-- 沿用上一段 html 代碼 -->

ログイン後にコピー

// js code// eventDOM.jsbtn1.addEventListener('click',function(e) {
    e.stopPropagation()
    console.log('btn1 capture')}, true)btn1.addEventListener('click',function() {
    console.log('btn1 bubble')}, false)btn2.addEventListener('click',function() {
    console.log('btn2 capture')}, true)btn2.addEventListener('click',function() {
    console.log('btn2 bubble')}, false)btn3.addEventListener('click',function() {
    console.log('btn3 capture')}, true)btn3.addEventListener('click',function() {
    console.log('btn3 bubble')}, false)

ログイン後にコピー

點擊 btn1 輸出如下:

雖然我們對 btn1 阻止了冒泡，但是為什麼還是輸出了 btn bubble呢?原因就是前面提到了，目標節點不區分捕獲/冒泡階段，但是後面也就不會繼續冒泡了，算是個比較特殊的情況，可以稍微留意下。

結語

本篇大致介紹了 js 的事件流的各種模型以及階段上的工作任務，個人認為應該還算詳細。雖然個人感覺好像對編程本身沒有太明顯的幫助，但是還是算是 js 的一個重要的知識點，學習下也沒甚麼不好。若內容有誤，還歡迎指點!

相关免费学习推荐：javascript（视频）


String	「クリック」など、監視するイベントの名前。ここで「on」にする必要はないことに注意してください。
function	イベントをトリガーするために実行されるコールバック関数

以上がJavaScript のイベントフローの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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メールのログイン入り口はどこですか？

7514

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles

JavaScript のイベント フローの概要

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

JavaScript のイベントフローの概要