回答:
e
event
イベントハンドラーに渡されるオブジェクトの短いvar参照です。
イベントオブジェクトには基本的に、イベントハンドラーで使用できる多くの興味深いメソッドとプロパティがあります。
あなたが投稿した例ではクリックハンドラです MouseEvent
$(<element selector>).click(function(e) {
// does something
alert(e.type); //will return you click
}
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
免責事項:これはこの特定の投稿に対する非常に遅い回答ですが、この質問に対するさまざまな回答を読んでいると、ほとんどの回答が経験豊富なプログラマーだけが理解できる用語を使用していることに驚かされました。この回答は、初心者を念頭に置いて元の質問に対処する試みです。
小さな ' (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();
});
何が起こっていますか?
ユーザーがIDが「#someLink」の要素(おそらくアンカータグ)をクリックすると、無名関数「function(e)」が呼び出され、結果のオブジェクトがハンドラー「e」に割り当てられます。次に、そのハンドラーを取り、そのメソッドの1つである "e.preventDefault()"を呼び出します。これにより、ブラウザーがその要素のデフォルトアクションを実行できなくなります。
注:ハンドルの名前はほとんど何でもかまいません(つまり、 ' function(billybob) ')。「e」は「イベント」を表し、このタイプの関数のかなり標準的なようです。
'e.preventDefault()'はおそらくイベントハンドラーの最も一般的な使用法ですが、オブジェクト自体には、イベントハンドラーを介してアクセスできる多くのプロパティとメソッドが含まれています。
このトピックに関する非常に優れた情報は、jQueryの学習サイトhttp://learn.jquery.comにあります。jQueryコアの使用とイベントのセクションに特に注意してください。
その例でe
は、はその関数の単なるパラメーターですが、それevent
を介して渡されるのはオブジェクトです。
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);
});
同じこと!
プログラマーは怠惰で、多くの省略表現を使用します。これは、部分的に作業を減らし、部分的には読みやすさを向上させます。それを理解することは、コードを書く精神を理解するのに役立ちます。
今日、私は「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で予約されていない任意の単語に変更できる理由でもあります。
$(this).click(function(e) {
// does something
});
上記のコードを参照する
$(this)
と、いくつかの変数として要素です。
click
実行する必要があるイベントです。
パラメータe
はjsから関数に自動的に渡されます。これはvalueの$(this)
値を保持し、コード内でさらに使用して何らかの操作を実行できます。