112

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

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

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

4

9 回答 9

117

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

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

在您发布的示例中,单击处理程序是MouseEvent

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

DEMO - 鼠标事件 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

于 2012-04-25T20:40:20.017 回答
58

免责声明:这是对这篇特定帖子的非常晚的回复,但是当我一直在阅读对这个问题的各种回复时,我感到震惊的是,大多数答案都使用了只有经验丰富的编码人员才能理解的术语。这个答案试图以新手观众的身份来解决原始问题。

介绍

小 ' (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”。现在使用该处理程序并调用其方法之一“e.preventDefault()”,这应该会阻止浏览器对该元素执行默认操作。

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

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

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

于 2016-09-22T22:26:09.483 回答
31

e没有任何特殊意义。当e参数为event.

有可能

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

也是。

于 2012-04-25T20:45:09.677 回答
8

在该示例中,e它只是该函数的一个参数,但它是event通过它传入的对象。

于 2012-04-25T20:44:38.030 回答
7

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

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

这意味着当一个<a>标签被点击时,阻止点击事件的默认动作。

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

于 2012-04-25T20:47:22.320 回答
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);
    }); 

一样!

程序员很懒,我们使用了很多速记,部分减少了我们的工作,部分有助于提高可读性。理解这一点将有助于你理解编写代码的心态。

于 2015-10-28T17:39:00.333 回答
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和一个错误:“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”只是您的函数的一个参数,您需要在 function() 中使用“e”来接收“事件对象”,然后执行 e.preventDefault()。这也是为什么你可以将“e”更改为任何不被js保留的单词的原因。

于 2017-04-19T09:32:49.397 回答
2

它是对当前事件对象的引用

于 2012-04-25T20:41:27.760 回答
-1
$(this).click(function(e) {
    // does something
});

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

于 2019-08-08T12:35:23.893 回答