在Javascript / jQuery中,(e)是什么意思?


94

我是JavaScript / jQuery的新手,我一直在学习如何制作函数。方括号中带有(e)的功能很多。让我告诉你我的意思:

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

似乎总是该函数甚至不使用(e)的值,那么为什么它经常出现呢?

Answers:


102

eevent将传递给事件处理程序的对象的简短var引用。

事件对象本质上具有许多可以在事件处理程序中使用的有趣的方法和属性。

在示例中,您发布的是一个点击处理程序,它是一个 MouseEvent

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

演示 -演示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


大声笑,这似乎是一个愚蠢的问题,但更重要的是,它在正确的位置。,您可能想进一步举例说明它与常规js相比的用法(不是说有一个dif,而是它的用法)在jQuery中
类似于

@ SpYk3HH同意。计划这样做。
Selvakumar Arumugam 2012年

@SelvakumarArumugam所以我不太确定他们是同一个人。似乎一个返回w.Event,另一个返回MouseEvent。对于上面的示例,我认为它们足够相似,但是对于$(document).on('click','.btn',e => {console.log(e); console.log(event)} ); 两者是不同的。专门用于e.currentTarget和event.currentTarget。在这种情况下,e.currentTarget将为您提供所需的内容,但是event.currentTarget返回文档,而不是您单击的按钮。
亚当·杨格斯

查看响应,我会说事件=== e.originalEvent,并且e包含更多细节。
亚当·杨格斯


46

免责声明:这是对这篇特定帖子的最新回复,但是当我阅读了对该问题的各种回复后,令我惊讶的是,大多数答案使用的术语只有经验丰富的编码人员才能理解。该答案是针对初学者的解决原始问题的尝试。

介绍

小的(e)实际上是Java语言中称为事件处理函数的事物的更广泛范围的一部分。每个事件处理函数都会接收一个事件对象。出于讨论的目的,将对象视为具有许多属性(变量)和方法(函数)的“事物” ,这与其他语言中的对象非常相似。手柄的“ ē ”的一点内幕(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”。现在,使用该处理程序并调用其方法之一 “ e.preventDefault()”,该方法应防止浏览器对该元素执行默认操作。

注意:几乎可以将句柄命名为任何您想要的名称(即' function(billybob) ')。“ e”代表“事件”,对于这种类型的功能,这似乎是很标准的。

尽管'e.preventDefault()'可能是事件处理程序的最常用用法,但对象本身包含许多可以通过事件处理程序访问的属性和方法。

在jQuery的学习网站http://learn.jquery.com上可以找到有关此主题的一些非常好的信息。请特别注意“ 使用jQuery Core事件”部分。


29

e没有任何特殊含义。e参数为时,用作函数参数名称只是一种约定event

有可能

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

也一样



7

e参数是事件对象的缩写。例如,您可能想为锚创建代码,以取消默认操作。为此,您将编写如下内容:

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

这意味着在<a>单击标记时,请阻止click事件的默认操作。

尽管您可能经常看到它,但是即使您已将其指定为参数,也不必在函数中使用它。


4

在jQuery eevent,当前事件对象的缩写。通常将其作为触发事件函数的参数传递。

演示: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)

但是我认为有一点需要注意: 使用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错误:“未捕获的TypeError:e.preventDefault不是HTMLInputElement上的函数。(VM409:69)”。

当然,这次不会阻止click事件。因为在函数中再次定义了“ 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并阻止click事件 ...

因此,“ e”只是函数的参数,在function()中需要一个“ e”以接收“事件对象”,然后执行e.preventDefault()。这也是为什么您可以将“ e”更改为js不保留的任何单词的原因。



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

在上面的代码中引用
$(this)的元素就是其中的一些变量。
click是需要执行的事件。
该参数e会自动从js传递到保存value值的函数,$(this)并且可以在代码中进一步用于执行某些操作。


点击处理程序上的e包含clicked元素的javascript事件,而不包含$(this)的值。
Gerben Jongerius
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.