JavaScript イベントを処理するにはいくつかの方法があります

JavaScript イベントを処理するには 3 つの方法があります: 1. HTML イベント ハンドラー。イベント ハンドラーを HTML コードに直接追加します。構文は "" です。 2 . DOM0 レベルのイベント ハンドラー、指定されたオブジェクトのイベント処理を追加します。構文は "element object.event = function(){...}"; 3. DOM2 レベルのイベント ハンドラーも特定のオブジェクトに追加され、主に次の目的で使用されます。指定されたハンドルとイベント ハンドラーを削除するアクション。

#このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript イベントを処理するにはいくつかの方法があります

JavaScript イベント ハンドラーの 3 つの方法

イベントが生成されると、それを処理する必要があります。主な Javascript イベント ハンドラーは次のとおりです。 3 つの方法:

1. HTML イベント ハンドラー

つまり、次のコードのように、イベント ハンドラーを HTML コードに直接追加します。

上記のコードから、イベント処理が要素内に直接ネストされていることがわかります。これには問題があります: HTML コードと js の間の結合が強すぎるということです。ある日、js の showmsg を変更したい場合、それだけではありません。 jsでの修正も必要ですが、htmlでの修正も必要です 1～2件程度の修正は承りますが、コードが1万行レベルになると修正に多大な時間と費用がかかりますので、この方法は使用しないでください。

2. DOM0 レベルのイベント ハンドラー

は、指定されたオブジェクトにイベント処理を追加します。次のコードを見てください:

<input id="btn" value="按钮" type="button" onclick="showmsg();">
　　<script>
　　 function showmsg(){
　　 alert("HTML添加事件处理");
　　 }
　　</script>

上記よりcode を見ると、HTML イベント ハンドラーである DOM0 レベルのイベントと比較して、HTML コードと js コードの間の結合が大幅に減少していることがわかります。しかし、賢明なプログラマはまだ満足しておらず、より簡単な対処方法を見つけたいと考えています。

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

DOM2 も特定のオブジェクトにイベント ハンドラーを追加しますが、主に指定と削除を処理する 2 つのメソッドが必要です。イベント ハンドラーの操作: addEventListener () およびremoveEventListener()。これらはすべて、処理されるイベント名、イベント ハンドラーとしての関数、およびブール値 (キャプチャ フェーズでイベントを処理するかどうか) の 3 つのパラメーターを受け取ります。次のコード部分を見てください:

<input id="btn" value="按钮" type="button">
　　<script>
　　　　var btn= document.getElementById("btn");
　　 btn.onclick=function(){
　　　　　　alert("DOM级添加事件处理");
　　　　} 
　　　　btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
　　</script>

ここで、イベント処理を追加および削除する場合、最後の方法がより直接的で最も単純であることがわかります。ただし、Ma Haixiang は、削除イベントを処理するときに、渡されるパラメータが以前のパラメータと一致している必要があることを全員に思い出させます。そうでない場合、削除は無効になります。

拡張知識:

イベント ストリームは、ページ上でイベントが受信される順序を記述します。ブラウザ開発の初期の頃、2 つの主要なブラウザ メーカー IEと Netscape は互いに競合していましたが、不正な状況が存在します。つまり、両者はイベント フローの 2 つの完全に反対の定義を持っています。それは、私たちがよく知っている、IE のイベント バブリングや Netscape のイベント キャプチャです。最初に写真を撮り、その構造を簡単に見てみましょう:

1. イベント バブリング

イベント バブリングとは、イベントが最も具体的な要素 (ドキュメント内で最も深いネスト レベルを持つノード) が受信され、最も具体性の低いノード (ドキュメント) まで伝播されます。上の図で説明すると、テキスト部分がクリックされると、最初にテキストの要素によって受信され、次に段階的にウィンドウに伝播されます。つまり、6-7-8-9-10 のプロセスです。が実行されます。

2. イベント キャプチャ

イベント キャプチャとは、イベントが最も早く、より具体性の低いノードによって受信され、最も具体的なノードが最後にイベントを受信することを意味します。同様に、上記のモデルでは、テキスト部分がクリックされると、それがまずウィンドウで受信され、それから段階的にテキスト要素に伝播する、つまり1-2-3-4-5の処理が実行されます。

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

以上がJavaScript イベントを処理するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。