JavaScript イベントを処理するには、次の 3 つの方法があります。 1. HTML イベント ハンドラー。HTML コードにイベント ハンドラーを直接追加します。構文は「<element events=event function...>」です。 2. DOM0 レベルのイベント ハンドラー。指定されたオブジェクト イベント処理を追加する場合、構文は「element object.event=function(){...}」です。 3. DOM2 レベルのイベント ハンドラーも特定のオブジェクトに追加され、主に指定およびオブジェクトの操作を処理するために使用されます。イベントハンドラーを削除しています。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
Javascript イベント ハンドラーを使用する 3 つの方法
イベントが発生すると、それを処理する必要があります。JavaScript イベント ハンドラーには主に 3 つのメソッドがあります。
1. HTMLイベントハンドラー
つまり、次のコードのように、HTML コードにイベント ハンドラーを直接追加します。
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){alert("HTML 追加イベント処理"); </script>上記のコードから、イベント処理が要素内で直接ネストされていることがわかります。これには問題があります。HTML コードと js の間の結合が強すぎるため、js の showmsg を変更する必要があるだけではありません。 jsで修正した場合はhtmlでも修正する必要があります。1～2件程度の修正は承りますが、1万行レベルになると修正に多くの時間と費用がかかります。 、この方法はお勧めしません。
2. DOM レベル 0 イベント ハンドラー
つまり、指定されたオブジェクトのイベント処理を追加します。次のコードを見てください。
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){alert("DOM レベル追加イベント処理") ); } btn.onclick=null;//btn のクリック イベントを削除したい場合は、null に設定してください。</script>上記のコードから、HTML イベント ハンドラー、DOM レベル 0 イベントと比較して、HTML コードと JS コード間の結合が大幅に軽減されていることがわかります。しかし、賢明なプログラマーはまだ満足しておらず、これに対処するための 3 番目の方法を見てみましょう。
3. DOM2 レベルのイベント ハンドラー
DOM2 もイベント ハンドラーを特定のオブジェクトに追加しますが、主に、イベント ハンドラーの指定と削除の操作を処理するための 2 つのメソッド、addEventListener() と RemoveEventListener() が必要です。これらはすべて、処理されるイベントの名前、イベント ハンドラーとしての関数、およびブール値 (キャプチャ フェーズでイベントを処理するかどうか) の 3 つのパラメーターを受け取ります。次のコード部分を見てください。
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//ここでは最後の値を false に設定します。つまり、キャプチャ段階では処理されません。一般に、バブリング処理はさまざまなブラウザーでの互換性が高くなります。 btn.removeEventListener ("click",showmsg,false);// このイベントを削除したい場合は、同じパラメータを渡すだけです</script>ここで、イベント処理を追加および削除する場合、最後の方法がより直接的で最も単純であることがわかります。ただし、Ma Haixiang は、削除イベントを処理するときに、渡されるパラメータが以前のパラメータと一致している必要があることを全員に思い出させます。そうでない場合、削除は無効になります。
知識を広げてください:
イベント フローは、ページ上でイベントが受信される順序を記述します。ブラウザ開発の初期には、2 つの主要なブラウザ メーカーである IE と Netscape が互いに対立しており、そのため、両者の解釈は苛立たしい状況に陥りました。イベントフローはまったく異なります。それは、私たちがよく知っている、IE のイベント バブリングや Netscape のイベント キャプチャです。まず写真を撮って、構造を簡単に見てみましょう。
1. イベントバブリング
イベント バブリングとは、イベントが最初に最も具体的な要素 (ドキュメント内で最も深いネスト レベルを持つノード) によって受信され、その後、最も具体性の低いノード (ドキュメント) まで上向きに伝播することを意味します。上の図で説明すると、テキスト部分がクリックされると、最初にテキストの要素によって受信され、次に段階的にウィンドウに伝播されます。つまり、6-7-8-9-10 のプロセスです。が実行されます。
2. イベントキャプチャ
イベント キャプチャとは、イベントが最初に特定性の低いノードによって受信され、最も特定性の高いノードが最後にイベントを受信することを意味します。同様に、上記のモデルでは、テキスト部分がクリックされると、それがまずウィンドウで受信され、それから段階的にテキスト要素に伝播する、つまり1-2-3-4-5の処理が実行されます。