関数イベントの概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

関数イベントの概要

jacklove

May 21, 2018 pm 03:42 PM

jsイベント関数

関数を学習する際には、多くの関数イベントが発生します。この記事では、それらについて詳しく説明します。

イベントとは何ですか?

JavaScript と HTML 間の対話はイベントを通じて実現されます。イベントは、ドキュメントまたはブラウザウィンドウ内で発生する対話の特定の瞬間です。リスナー (またはハンドラー) を使用してイベントをスケジュールし、イベントの発生時に適切なコードが実行されるようにすることができます。従来のソフトウェアエンジニアリングではオブザーバーパターンとして知られるこのモデルは、ページの動作 (JavaScript) とページの外観 (HTML および CSS) の間の疎結合をサポートします。

イベントフロー

イベントフローは、ページからイベントを受け取る順序を記述します。次のコードを想定します:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

div をクリックします。このクリックは div 上で発生するだけでなく、その親コンテナー本体もクリックされます。では、誰が最初にクリックされたのか、またイベントはどのように広がったのでしょうか?イベントストリームは、このような一連の受信イベントを記述します。

IE イベントフロー (イベントバブリング)

IE イベントフローはイベントバブリングとも呼ばれます。つまり、イベントは最初に最も特定的な要素 (ドキュメント内で最も深いネスト層を持つノード) によって受信され、次に次の要素に伝播します。特定性の低い要素をステップごとに説明します。
上記のコードを例にとると、div 要素をクリックすると、クリックイベントは次の順序で伝播されます:

1.<div>
2.<body>
3.<html>
4.document

つまり、最初にクリックイベントが div 要素で発生し、これがelement は要素をクリックしたものであり、クリックイベントは DOM ツリーを上に伝播し、ドキュメントオブジェクトに伝播するまでノードの各レベルで発生します。

最新のブラウザはすべてイベントバブリングをサポートしていますが、いくつかの違いがあります。 IE5.5 以前のバージョンのイベントバブルは、html 要素をスキップし、本文からドキュメントに直接進みます。 IE9、Firefox、Chrome、Safari では、イベントがウィンドウオブジェクトまでバブルされます。 (古い IE ブラウザはイベントバブリングのみをサポートします)。

イベントキャプチャ

イベントキャプチャの考え方は、特定性の低いノードがより早くイベントを受信し、特定のノードが最後にイベントを受信するというものです。これは、上の例を再度取り上げると、div をクリックします。、イベントキャプチャのイベントトリガーシーケンスは次のとおりです。

1.document
2.<html>
3.<body>
4.<div>

イベントキャプチャプロセス中、ドキュメントオブジェクトは最初にクリックイベントを受け取り、次にイベントは、実際のターゲットに到達するまで DOM ツリーに沿って下方向に伝播されます。イベント。

IE9、Firefox、Chrome、Safari、Opera はすべてイベントキャプチャをサポートしています。 DOM2 レベルのイベント仕様では、イベントがドキュメントオブジェクトから伝播を開始する必要がありますが、これらのブラウザはウィンドウオブジェクトからイベントのキャプチャを開始します。

DOM イベントフロー

DOM レベル 2 イベントによって指定されるイベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブリングステージの 3 つのステージが含まれます。最初に行われるのはイベントのキャプチャであり、イベントを傍受する機会が提供されます。その後、実際のターゲットがイベントを受信します。最後のフェーズはバブリングフェーズで、イベントに応答できます。

DOM イベントストリームでは、実際のターゲットはキャプチャフェーズ中にイベントを受信しません。これは、キャプチャフェーズ中、ドキュメントから HTML、本文までのイベントが停止されることを意味します。次のステージはターゲットステージ内にあるため、イベントは div 上で発生し、イベント処理のバブリングステージの一部とみなされます。次に、バブリングフェーズが発生し、イベントがドキュメントに戻されます。
しかし、実際には、IE9、Firefox、Chrome、Safari、Opera9.5 以降では、キャプチャフェーズ中にイベントオブジェクトでイベントがトリガーされます。その結果、ターゲットオブジェクトのイベントを操作する機会が 2 つ存在します。 (IE8 以前のバージョンは DOM イベントストリーミングをサポートしていません)。

イベントハンドラー

イベントとは、ユーザーまたはブラウザ自体によって実行されるアクションです。クリック、ロード、マウスオーバーなどはすべてイベント名です。イベントに応答する関数をイベントハンドラ(イベントリスナー)と呼びます。イベントハンドラーの名前は「on」で始まるため、クリックイベントのイベントハンドラーは onclick、load イベントのハンドラーは onload になります。イベントのハンドラーを指定するにはいくつかの方法があります。

HTML イベントハンドラー

要素によってサポートされる各イベントは、対応するイベントハンドラーと同じ名前の HTML 属性を使用して指定できます。この属性の値は、実行可能な JavaScript コードである必要があります。例:

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

HTML でのイベントハンドラーの定義には、実行する特定のアクションを含めることができます。または、ページ上の他の場所で定義されたスクリプトを呼び出すこともできます。例:

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

HTML 経由イベントハンドラーを指定すると、次の 2 つの欠点があります。1. ユーザーは HTML 要素がページに表示されるとすぐに対応するイベントをトリガーする可能性があるため、時間差の問題が発生します。ただし、この時点ではイベントハンドラーに実行条件がない可能性があります。2. HTML とJavaScript コードは密接に関連しているため、イベントハンドラーを変更したい場合は、HTML コードと JavaScript コードを変更する必要があります。

DOM レベル 0 イベントハンドラー

JavaScript を通じてイベントハンドラーを指定する従来の方法は、イベントハンドラープロパティに関数を割り当てることです。各要素には独自のイベントハンドラー属性があり、通常はすべて小文字です (onclick など)。この属性の値を関数に設定することで、イベントハンドラーを指定できます。例:

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

相关推荐：

关于正则表达式的相关理解

Javascript中关于this的用法

关于Math、数组、Date的相关例子

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

声明

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

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles