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

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

イベントとは何ですか?

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中文网。