JS のいくつかのタイプのイベント ハンドラーの詳細な紹介

イベントとは、ユーザーまたはブラウザ自体によって実行される特定のアクションです。クリック、ロード、マウスオーバーなどはイベントの名前です。

イベント フローは、ページからイベントを受信する順序を記述します。

イベントハンドラーは、イベントに応答する関数です。イベント ハンドラーの名前は「on」で始まります。たとえば、クリック イベントに対応するイベント ハンドラーの名前は onclick です。

イベントのハンドラーを指定するには、HTML イベント ハンドラー、DMO レベル 0 イベント ハンドラー、DOM レベル 2 イベント ハンドラー、IE イベント ハンドラー、クロスブラウザー イベント ハンドラーなど、さまざまな方法があります。

(1) htmlイベントハンドラ

つまり、対応するhtmlタグ内にイベントハンドラを記述します。

例:

<input type="button" value="click me" onclick="alert("hello")" />

欠点: ① HTML 要素がページに表示されるとすぐにユーザーが対応するイベントをトリガーすると、イベント ハンドラーにはまだ実行条件 (たとえば、呼び出されたイベント) が設定されていない可能性があります。関数はまだ利用できません) が解析されている場合)、エラーが発生します。例:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

呼び出される関数がボタンの下にあるため、メッセージ関数が読み込まれる前にボタンをクリックするとエラーが発生します。

②htmlコードとjsコードの結合度が高すぎる場合、イベントハンドラーを変更したい場合は、htmlコードとjavascriptコードの2か所を変更する必要があります。

(2) DMOレベル0イベントハンドラ

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

注: このコードがボタンの後ろにある場合、このコードの前にイベントハンドラが指定されていないため、しばらくクリックしても応答がない可能性があります。実行されます。

DMO レベル 0 イベント ハンドラーは要素のメソッドとみなされます。つまり、DMO レベル 0 イベント ハンドラーは要素のスコープ内で実行されるため、プログラム内の this は現在の要素を参照します。イベント ハンドラーでこれを介して、要素のプロパティとメソッドにアクセスできます。

この方法で追加されたイベント ハンドラーは、イベント フローのバブリング フェーズ中に処理されます。

イベント ハンドラーの属性を null に設定するだけで、指定したイベント ハンドラーを削除することもできます。

eg:
btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

(3) DOM2 レベルのイベント ハンドラー

DOM2 レベルのイベントでは、イベント ハンドラーを指定および削除するための 2 つのメソッドが定義されています。これら 2 つの操作は、addEventListener() と RemoveEventListner() です。すべての DOM ノードには、これら 2 つのメソッドが含まれています。処理するイベント名、処理関数、およびブール値の 3 つのパラメーターを受け入れる必要があります。最後のブール値パラメータが true の場合、ハンドラーがキャプチャ フェーズで呼び出されることを意味します。 false の場合、イベント ハンドラーがバブリング フェーズで呼び出されることを意味します。

たとえば、ボタンをクリックするためのイベント ハンドラーを追加するには、次のコードを使用できます:

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

DOM2 イベント ハンドラーを使用する利点は、同じ要素に複数のイベント ハンドラーを追加できることです。

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

結果: 最初に ID が表示され、次に hello world が表示されます。

addEventListner() を通じて追加されたイベント ハンドラーは、removeEventListner を通じてのみ削除できます。削除に使用されるパラメータは、イベント ハンドラの追加に使用されるパラメータと同じです。もう 1 つの注意: addEventListner を通じて追加された匿名関数は削除できません。

(4) IE イベントハンドラー。イベント ハンドラーを追加および削除するための

IE の関数は、attachEvent() と detachEvent() です。これら 2 つの関数は、同じ 2 つのパラメーター、イベント ハンドラー名とイベント処理関数を受け取ります。 IE はイベント バブリングのみをサポートしているため、attachEvent を通じて追加されたイベント ハンドラーはバブリング フェーズに追加されます。

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE AttachEvent メソッドを使用する場合、イベント ハンドラーのスコープはグローバル スコープであるため、これは window と等しくなります。 (これは、クロスブラウザー コードを作成するときに覚えておくことが非常に重要です)。

addEventListner と同様に、attachEvent() メソッドを使用して要素に複数のイベント ハンドラーを追加することもできます。

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

これらのイベントのハンドラーは逆の順序でトリガーされる、つまり hello が最初に表示されることに注意してください。 「ワールドクリック」が再びポップアップ表示されます。

detach()の使用方法について簡単に説明します。

(5) クロスブラウザイベントハンドラー

クロスブラウザでイベントを処理するには、主に次の 2 つの方法があります:

① ブラウザの違いを分離できる js ライブラリを使用します。

②最適なイベント処理メソッドを自分で書きます。ここでは機能検出が使用されています。つまり、ブラウザーの機能を識別します。ほとんどのブラウザーでコードが一貫して実行されるようにするには、バブリング段階だけに注目してください。

コードの手順は次のとおりです。 作成される最初のメソッドは addHandler (ブラウザ間の互換性の問題に対処するために使用されます。ここでは具体的なコードは示されていません) は、DOM0 レベルのメソッドを使用するか DOM2 レベルのメソッドを使用するかを決定することです。方法、状況に応じてイベントを追加する方法。 addHandler は、操作対象の要素、イベント名、イベント ハンドラー関数の 3 つのパラメーターを受け取ります。このメソッドは、EventUtil という名前のオブジェクトに属します。このオブジェクトは、ブラウザ間の違いを処理するためにここで使用されます。

addHandler に対応するメソッドは、removeHandler() で、これも同じパラメータを受け取ります。このイベントの役割は、以前に追加されたイベント ハンドラーを削除することです。イベントがオブジェクトにどのように追加されたとしても、他のメソッドが無効な場合は、デフォルトで DOM レベル 0 メソッドが使用されます。

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式，希望今后会对大家有帮助。

相关文章：

重点解答动态加载JS脚本，一语道破

javascript中遍历EL表达式List集合中的值

如何在<script></script>标签中一样可以使用el表达式

以上がJS のいくつかのタイプのイベント ハンドラーの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。