【问题标题】:In Javascript/jQuery what does (e) mean?在 Javascript/jQuery 中,(e) 是什么意思?
【发布时间】:2012-05-06 14:15:07
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript jquery function parameters parameter-passing


    【解决方案1】:

    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 相比的使用示例(不是那个有一个差异,但是它在 jQuery 中的使用方式与 js 相似)
    • @SpYk3HH 同意。计划这样做。
    • @SelvakumarArumugam 所以我不太确定它们是否相同。似乎一个返回 w.Event,另一个返回 MouseEvent。对于上面的示例,我认为它们足够相似,但是对于 $(document).on('click', '.btn', e=> { console.log(e); console.log(event)} );两者是不同的。专门针对 e.currentTarget 和 event.currentTarget。在这种情况下,e.currentTarget 会给你你需要的东西,但是 event.currentTarget 返回的是文档而不是你点击的按钮。
    • 查看回复我会说 event === e.originalEvent,并且 e 包含更多细节。
    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

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

        可以

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

        也是。

        【讨论】:

          【解决方案5】:

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

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

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

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

          【讨论】:

            【解决方案6】:

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

            演示:jQuery Events

            在演示中我使用了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);
                }); 
            

            同样的事情!

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

            【讨论】:

              【解决方案7】:

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

              简介

              (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 上找到有关此主题的一些非常好的信息。请特别注意Using jQuery CoreEvents 部分。

              【讨论】:

                【解决方案8】:

                今天我刚刚写了一篇关于“为什么我们在 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>
                

                你会得到:8error:"Uncaught TypeError: e.preventDefault is not a function 在 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保留的单词的原因。

                【讨论】:

                  【解决方案9】:
                  $(this).click(function(e) {
                      // does something
                  });
                  

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

                  【讨论】:

                  • e 在点击处理程序上包含被点击元素的 javascript 事件,而不是 $(this) 的值。
                  猜你喜欢
                  • 2016-11-15
                  • 2010-11-06
                  • 2017-06-11
                  • 2020-03-03
                  • 2015-09-21
                  • 2021-12-29
                  • 2019-05-07
                  • 2017-06-19
                  相关资源
                  最近更新 更多