web-dev-qa-db-ja.com

Javascript / jQueryでは（e）とはどういう意味ですか？

JavaScript/jQueryは初めてで、関数の作成方法を学んでいます。多くの関数は、括弧内に（e）が付いています。私が何を意味するかをお見せしましょう：

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

関数は（e）の値さえ使用しないように見えるので、なぜ頻繁に存在するのでしょうか？

javascriptjqueryfunctionparametersparameter-passing
81
shrewdbeans

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

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

投稿した例では、MouseEventであるクリックハンドラーです。

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

DEMO -マウスイベントDEMOはe.whichおよびe.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

92
Selvakumar Arumugam

免責事項：これはこの特定の投稿への非常に遅い回答ですが、この質問に対するさまざまな回答を読んでいると、答えのほとんどができる用語を使用していることに感銘を受けました経験豊富なコーダーのみが理解してください。この回答は、初心者の聴衆を念頭に置いて元の質問に取り組む試みです。

イントロ

小さな '（e）'のことは、実際にはイベント処理関数と呼ばれるJavascriptの何かのより広い範囲の一部です。すべてのイベント処理関数は、イベントオブジェクトを受け取ります。この議論の目的のために、オブジェクトをプロパティ（variables）とメソッド（functions）、他の言語のオブジェクトとよく似ています。ハンドル（小さな（e））内の 'e'は、変数と対話して、オブジェクト（そして、用語variableを非常に大雑把に使用します）。

次の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 Coreの使用 および Events セクションに特に注意してください。

38
dsanchez

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

かもね

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

同じように。

29
Peter Porfy

その例では、eはその関数の単なるパラメーターですが、それを介して渡されるのはeventオブジェクトです。

7
James Johnson

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

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

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

頻繁に表示される場合がありますが、引数として指定したとしても、関数内で使用する必要があるものではありません。

7
j08691

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
Gothburz

今日、「e.preventDefault（）で「e」のような文字を使用する理由」についての投稿を書きました。私の答えは意味があると思います...

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

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

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

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

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

（MDNから）

ただし、注意すべき点が1つあると思います。 Javascript関数をリスナーとして使用すると、Eventインターフェイス（オブジェクトイベント）を実装するオブジェクトが自動的に"first関数のパラメータ」です。したがって、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およびerror： "Uncaught TypeError：e.preventDefaultは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 object」を受信して​​e.preventDefault（）を実行するにはfunction（）に「e」が必要です。これは、jsによって予約されていない単語に「e」を変更できる理由でもあります。

4
Jason Liu

現在のイベントオブジェクトへの参照です

2
keune