JavaScript / jQueryで(e)はどういう意味ですか?


94

私はJavaScript / jQueryを初めて使用し、関数を作成する方法を学びました。多くの関数は、(e)で括弧で囲まれています。私が言っていることをお見せしましょう:

$(this).click(function(e) {
    // does something
});

関数は(e)の値も使用しないように常に見えますが、なぜそれほど頻繁に存在するのでしょうか。

回答:


102

eeventイベントハンドラーに渡されるオブジェクトの短いvar参照です。

イベントオブジェクトには基本的に、イベントハンドラーで使用できる多くの興味深いメソッドとプロパティがあります。

あなたが投稿した例ではクリックハンドラです MouseEvent

$(<element selector>).click(function(e) {
    // does something
    alert(e.type); //will return you click
}

DEMO -マウスイベントは、用途のデモe.whiche.type

いくつかの有用な参照:

http://api.jquery.com/category/events/

http://www.quirksmode.org/js/events_properties.html

http://www.javascriptkit.com/jsref/event.shtml

http://www.quirksmode.org/dom/events/index.html

http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list


笑、これはほとんどばかげた質問のように見えますが、それでもなお、それは適切な場所にあります。通常のjsと比較したその使用例を使ってさらに回答することもできます(difがあるわけではありませんが、どのようにjQueryでjsと
同様に

@ SpYk3HH同意した。そうする計画。
Selvakumar Arumugam 2012

@SelvakumarArumugamだから私は彼らが同じものかどうかはわかりません。1つはw.Eventを返し、もう1つはMouseEventを返すようです。上記の例では、それらは十分似ていると思いますが、$(document).on( 'click'、 '.btn'、e => {console.log(e); console.log(event)}の場合は); 2つは異なります。特にe.currentTargetおよびevent.currentTargetの場合。この場合、e.currentTargetは必要なものを提供しますが、event.currentTargetはクリックしたボタンではなくドキュメントを返します。
Adam Youngers、2018年

応答を見ると、event === e.originalEventであり、eにはもう少し詳細が含まれていると言えます。
Adam Youngers、2018年


46

免責事項:これはこの特定の投稿に対する非常に遅い回答ですが、この質問に対するさまざまな回答を読んでいると、ほとんどの回答が経験豊富なプログラマーだけが理解できる用語を使用していることに驚かされました。この回答は、初心者を念頭に置いて元の質問に対処する試みです。

はじめに

小さな ' (e) 'は、実際には、JavaScriptのイベント処理関数と呼ばれるより広い範囲の一部です。すべてのイベント処理関数はイベントオブジェクトを受け取ります。この説明では、オブジェクトを、他の言語のオブジェクトと同じように、一連のプロパティ(変数)とメソッド(関数)を保持する「もの」と考えます。小さな(e)内のハンドル「e」は、オブジェクトと対話できる変数のようなものです(私は変数という用語を大まかに使用しています)。

次のjQueryの例を検討してください。

$("#someLink").on("click", function(e){ // My preferred method
    e.preventDefault();
});

$("#someLink").click(function(e){ // Some use this method too
    e.preventDefault();
});

説明

  • "#someLink"は要素セレクターです(これはHTMLタグによってトリガーされます)。
  • 「クリック」はイベントです(選択した要素がクリックされたとき)。
  • 「function(e)」は、イベント処理関数です(イベントが発生すると、オブジェクトが作成されます)。
  • 「e」はオブジェクトハンドラーです(オブジェクトはアクセス可能になります)。
  • 「preventDefault()」は、オブジェクトによって提供されるメソッド(関数)です。

何が起こっていますか?
ユーザーがIDが「#someLink」の要素(おそらくアンカータグ)をクリックすると、無名関数「function(e)」が呼び出され、結果のオブジェクトがハンドラー「e」に割り当てられます。次に、そのハンドラーを取り、そのメソッドの1つである "e.preventDefault()"を呼び出します。これにより、ブラウザーがその要素のデフォルトアクションを実行できなくなります。

注:ハンドルの名前はほとんど何でもかまいません(つまり、 ' function(billybob) ')。「e」は「イベント」を表し、このタイプの関数のかなり標準的なようです。

'e.preventDefault()'はおそらくイベントハンドラーの最も一般的な使用法ですが、オブジェクト自体には、イベントハンドラーを介してアクセスできる多くのプロパティとメソッドが含まれています。

このトピックに関する非常に優れた情報は、jQueryの学習サイトhttp://learn.jquery.comにあります。jQueryコア使用イベントのセクションに特に注意してください。


29

e特別な意味はありません。eパラメータがの場合、関数のパラメータ名として使用するのは単なる慣例ですevent

かもね

$(this).click(function(loremipsumdolorsitamet) {
    // does something
}

同じように。



7

e引数は、イベントオブジェクトの略です。たとえば、デフォルトのアクションをキャンセルするアンカーのコードを作成するとします。これを行うには、次のように記述します。

$('a').click(function(e) {
    e.preventDefault();
}

これは、<a>タグがクリックされたときに、クリックイベントのデフォルトアクションを防止することを意味します。

よく目にするかもしれませんが、引数として指定したとしても、関数内で使用する必要はありません。


4

jQueryのe略でevent、現在のイベントオブジェクト。これは通常、発生するイベント関数のパラメーターとして渡されます。

デモ:jQueryイベント

デモで使用した e

$("img").on("click dblclick mouseover mouseout",function(e){
        $("h1").html("Event: " + e.type);
}); 

私も使ったことがあります event

 $("img").on("click dblclick mouseover mouseout",function(event){
            $("h1").html("Event: " + event.type);
    }); 

同じこと!

プログラマーは怠惰で、多くの省略表現を使用します。これは、部分的に作業を減らし、部分的には読みやすさを向上させます。それを理解することは、コードを書く精神を理解するのに役立ちます。


4

今日、私は「e.preventDefault()で「e」のような文字を使用するのはなぜですか?」について投稿しました。私の答えには意味があると思います...

最初に、addEventListenerの構文を見てみましょう。

通常は次のようになります 。target.addEventListener(type、listener [、useCapture]);

また、addEventlistenerのパラメーターの定義は次のとおりです。

type:リッスンするイベントタイプを表す文字列。

listener:指定されたタイプのイベントが発生したときに通知を受け取るオブジェクト(Eventインターフェースを実装するオブジェクト)。これは、EventListenerインターフェースを実装するオブジェクト、またはJavaScript関数でなければなりません。

(MDNから)

ただし、注意すべき点が1つあると思い ます。Javascript関数をリスナーとして使用すると、Eventインターフェース(オブジェクトイベント)を実装するオブジェクトが、関数の「最初のパラメーター」に自動的に割り当てられます。 function(e)、オブジェクトは「e」に割り当てられます。これは、「e」が関数の唯一のパラメーターであるためです(最終的には最初のパラメーターです!)。e.preventDefaultを使用して、何かを防止できます。

以下の例を試してみましょう:

<p>Please click on the checkbox control.</p>
<form>
    <label for="id-checkbox">Checkbox</label>
    <input type="checkbox" id="id-checkbox"/>

    </div>
</form>
<script>
    document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
         //var e=3;
         var v=5;
         var t=e+v;
         console.log(t);
        e.preventDefault();

    }, false);
</script>

結果は:[object MouseEvent] 5になり、クリックイベントを防ぐことができます。

しかし、次のようにコメント記号を削除すると:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            e.preventDefault();

       }, false);
   </script>

8エラー: "Uncaught TypeError:e.preventDefault is not a function at HTMLInputElement。(VM409:69)"が表示されます。

確かに、今回はクリックイベントは防止されません。「e」が関数で再度定義されたためです。

ただし、コードを次のように変更した場合:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            event.preventDefault();

       }, false);
   </script>

すべてが適切に機能します... 8になり、クリックイベントが防止されます...

したがって、「e」は関数の単なるパラメーターであり、「eventオブジェクト」を受け取ってe.preventDefault()を実行するには、function()に「e」が必要です。これは、「e」をjsで予約されていない任意の単語に変更できる理由でもあります。



-1
$(this).click(function(e) {
    // does something
});

上記のコードを参照する
$(this)と、いくつかの変数として要素です。
click実行する必要があるイベントです。
パラメータeはjsから関数に自動的に渡されます。これはvalueの$(this)値を保持し、コード内でさらに使用して何らかの操作を実行できます。


クリックハンドラーのeには、$(this)の値ではなく、クリックされた要素のjavascriptイベントが含まれています。
Gerben Jongerius
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.