JSのイベント処理関数名の後ろに括弧があるかどうかについての質問

今日はイベント ハンドラーについての詳細をまとめます。まず、イベント処理の概念をいくつか確認してみましょう。

JSにおけるイベント処理（イベントバインディング）とは、一部または特定のイベントに特定のアクティビティをトリガーさせることです。 DOM レベル 0 と DOM レベル 2 という 2 つの一般的な形式があります。これら 2 つのメソッドの最大の違いは、DOM レベル 0 イベント処理はイベント バブリングにのみ使用できるのに対し、DOM レベル 2 イベント処理は 3 番目のパラメーターを設定することでイベント バブリングとイベント キャプチャをそれぞれサポートできることです。

DOM レベル 0 のイベント処理では、通常、メソッド 1 に示すように、イベント ハンドラーを要素に直接割り当てることができます。方法 2 に示されています。

<!--方式一-->
<div onclick="fun1();fun2(&#39;world!&#39;);"></div>
<!--方式二-->
<div id="a">点我</div>
<script>
var a=document.getElementById("a");
a.onclick=fun1; //方式二
function fun1(){
alert("hello!");
}
function fun2(cc){
alert(cc);
}
</script>

これら 2 つのメソッドの違いは、上の例にも示されています。最初のメソッドは複数の処理関数を同時にバインドできますが、グローバル関数である必要があることに注意してください。そうでない場合は、参照エラーが発生します。投げられる。 2 番目の方法では、一度に 1 つの処理関数のみをバインドできます。そうでない場合は、新しい関数が古い関数を上書きします。

DOMレベル2のイベント処理は、処理関数を直接バインドするのではなく、以下のようにイベントリスナーとして関数を追加することで、上書きせずに複数の処理関数をバインドすることもできます。ただし、このメソッドにはブラウザの互換性の問題があるため、IE では代わりにattachEvent メソッドを使用する必要があります。

a.addEventListener("click",fun1,false); //事件冒泡
a.addEventListener("click",anotherFun,false); //不会覆盖上一事件，均被执行

簡単なレビューはここまでです。レビューのプロセス中に、ややこしい細部に気づいたでしょうか。つまり、関数を参照するときに、括弧が後に追加されることがあります。括弧を追加しない関数名。これはプログラムの動作にどのような影響を与えますか?情報を参考にして私なりの理解に基づいて簡単にまとめてみました。

まず、括弧を追加します。関数名の後に括弧を追加すると、戻り値が関数メモリに存在する場合、その値がすぐに実行されます。が得られます。これを頻繁に使用すると、前述のイベント処理関数など、関数が呼び出されるすべての場所でこのように記述することに慣れるかもしれません。ただし、これを行うと、制御不能な状況が発生する可能性があります。たとえば、要素をクリックしたときにのみ関数を実行したいのは明らかですが、その関数は最初に実行されることがわかります。上記の例で使用されている DOM0 モード 2 および DOM2 レベルのイベント処理関数では、関数名の後に括弧が追加されていないことがわかります。これは、この状況を回避するためです。かっこを追加すると、関数 fun1 がトリガーされ、すぐに実行されます。

では、なぜ DOM0 メソッド 1 に括弧があるのでしょうか?これは、タグのイベント属性間の引用符が、かっこを追加することによってのみ js ステートメントとして直接実行されるためです。ただし、要素タグでイベントをバインドしているため、タグがクリックされたときに実行されるようにタイミングが制御されます。

関数名がなくてすぐに実行したい場合はどうすればよいでしょうか？つまり、このモードはすぐに実行されます。その後ろに即時実行の括弧があるかどうかを見てみましょう。この IIFE 形式では関数本体全体を囲む括弧が範囲を制限していることに注意してください。 IIFE に特に興味のある子供用靴は、ここでは詳しく説明しませんが、関連情報を確認できます。

(function(){
//do something...
})();

次に、括弧のないものを分析しましょう。括弧を追加しないことで制御が失われるのを避けることができると前述しました。これは、イベントに関数名だけを渡すことは、要素イベントに関数ポインタ (つまり、この関数のエントリ アドレス) を渡すことと同じであるためです。この利点は、必要なときに関数を見つけて実行できることです。ちょっとした比喩を使うと、友人に会うとき、括弧を追加すると、その友人はあなたがその時間に忙しいかどうかを気にせずにすぐにあなたの前に現れます。括弧を追加することは、あなたの友人が自宅の場所を教えて、必要なときに訪ねてくるのと同じです。これは本当に思いやりのある友人です。したがって、ほとんどのイベント バインディングは、関数名である関数ポインターをイベントに渡すだけです。

この時点で別の質問があります。これまでに説明した関数はすべてパラメータなしの関数で、コード例の fun2 のようなパラメータ付き関数の場合はどうなるでしょうか。 DOM0 メソッド 1 のみを使用できますか?もちろん、これは否定的です。構造と動作の分離の原則に従わない DOM0 モードを使用しないようにしてください。一般に、この状況は、次のコードに示すように、匿名関数を使用することで解決されます。良い提案があれば、メッセージを残して共有してください~

//DOM Level 0
a.onclick=function(){
fun2("world!");
};
//DOM Level 2
a.addEventListener("click",function(){fun2("world!");},false);