JavaScript イベントを処理するにはいくつかの方法があります-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-06-29 16:23:27

オリジナル

2540 人が閲覧しました

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

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

#このチュートリアルの動作環境: 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 のイベントキャプチャです。最初に写真を撮り、その構造を簡単に見てみましょう:

JavaScript イベントを処理するにはいくつかの方法があります 1. イベントバブリング

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

2. イベントキャプチャ

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

【関連する推奨事項:

JavaScript ビデオチュートリアル

、Web フロントエンド ]

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