jquery/javascript: function(e){.... e 是什么?为什么需要它?它实际上做了什么/完成了什么?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3535996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:03:54  来源:igfitidea点击:

jquery/javascript: function(e){.... what is e? why is it needed? what does it actually do/accomplish?

javascriptjqueryevents

提问by android.nick

$('#myTable').click(function(e) {
    var clicked = $(e.target);
    clicked.css('background', 'red');
});

Can someone explain this to me, and explain why e is needed, and what it actually does..

有人可以向我解释这一点,并解释为什么需要 e 以及它实际做什么..

回答by Frankie

Using eis just a short for event. You can pass any variable name you desire.

Usinge只是event. 你可以传递任何你想要的变量名。

// would work just the same
$('#myTable').click(function(anyothername) {
    var clicked = $(anyothername.target);
});

You can check out more on jQuery's handling of events.

您可以查看有关jQuery 处理事件的更多信息

回答by David Hoerster

One benefit to having e(the object that raised the event) allows you to prevent the propagation of default behaviors for certain elements. For example:

拥有e(引发事件的对象)的一个好处是可以防止某些元素的默认行为传播。例如:

<a id="navLink" href="http://mysite/someOtherPage.htm">Click For Info</a>

renders a link that the user can click. If a user has JavaScript disabled (why? I dunno), you want the user to navigate to someOtherPage.htm when they click the link. But if they have JavaScript enabled, then you want to display a modal dialog and not navigate away from the page. You would handle this by preventing the default behavior of the anchor/link and displaying the modal as such:

呈现用户可以点击的链接。如果用户禁用了 JavaScript(为什么?我不知道),您希望用户在单击链接时导航到 someOtherPage.htm。但是如果他们启用了 JavaScript,那么您希望显示一个模态对话框而不是离开页面。您可以通过阻止锚点/链接的默认行为并按如下方式显示模式来处理此问题:

$("#navLink").click(function(e) {
  e.preventDefault();  //this prevents the user from navigating to the someOtherPage.htm
  $("#hiddenDiv").dialog({
    //options
  });  //show the dialog
});

So having that parameter available allows you to, among other things described in other answers, prevent the default behavior of the selected element.

因此,使该参数可用,除其他答案中描述的其他事项外,您还可以防止所选元素的默认行为。

Hope this helps!

希望这可以帮助!

回答by BRianIAK The Villain

I'm speaking in theory as to I'm no expert but I achieved the desired result by using he the little (e) which doesn't have to be an e lol

我在理论上说我不是专家,但我通过使用他的小 (e) 达到了预期的结果,它不必是一个 e lol

I figured it out. It's a way of passing the same event from one function to another.

我想到了。这是一种将同一事件从一个函数传递到另一个函数的方法。

In simpler terms. I wanted to make the page navigation an elastic scroll function, however, I wanted the page to navigate by hover "and" I wanted the same navigation to be clickable upon certain conditions. I also wanted the same dynamic navigation from other click events that were not links. To keep the current target and still use the navigation function I had to set the little (e) because jQuery will lose the scope of $(this) as the same target of the function lol. Here's a quick example.

用更简单的话来说。我想让页面导航成为一个弹性滚动功能,但是,我希望页面通过悬停“和”导航,我希望在某些条件下可以点击相同的导航。我还想要来自其他非链接的点击事件的相同动态导航。为了保持当前目标并仍然使用导航功能,我必须设置小 (e),因为 jQuery 将失去 $(this) 的作用域作为函数 lol 的相同目标。这是一个快速示例。

function navigate_to_page(e){
var target = $(e.currentTarget).attr('href'); //--This is the same as $(this) but more static to bring out of it's scope
    $('html, body').animate({
    'scrollTop':$(target).offset().top-0,
    'scrollLeft': $(target).offset().left-$(window).width()*0.0}, 2000, 'easeOutBounce');
}

Don't let the gibberish confuse you. It's just a simple page scroll animation. The thing to pay attention to is the e.currentTarget. eis our variable and currentTargetis a jQuery equivalent to $(this) so those together is a Globular $(this) function. Now I call it by another function with condistions like so

不要让胡言乱语迷惑你。这只是一个简单的页面滚动动画。需要注意的是e.currentTargete是我们的变量,currentTarget是一个相当于 $(this) 的 jQuery,所以它们一起是一个 Globular $(this) 函数。现在我用另一个函数调用它,条件是这样的

$('#myNavigationDiv a').on('mouseenter', function(e){
    if($(myCondition) === true){
        return false;
        }else{
        navigate_to_page(e);
        }
    });

See how the little (e) linked everything together?

看看小 (e) 是如何将所有东西联系在一起的?

Now you can substitute (e) to (whateveryouwant). By calling e in both functions it matched e.currentTarget and you can apply this to whatever detailed specific functions you need and save yourself LITERALLY pages of code lol

现在你可以将 (e) 替换为 (whateveryouwan)。通过在这两个函数中调用 e 匹配e.currentTarget ,您可以将其应用于您需要的任何详细的特定功能,并节省自己的代码页,哈哈

回答by Matthew Flaschen

It's the formal parameter for the function. jQuery will pass in an event object when the function is called. This is used to determine the target. As noted in the documentation, jQuery will always pass an event object even when the browser (e.g. IE) doesn't.

它是函数的形式参数。jQuery 将在调用函数时传入一个事件对象。这用于确定目标。如文档中所述,即使浏览器(例如 IE)不传递事件对象,jQuery 也将始终传递事件对象。

In this case, the target tells you which element was originally clicked.

在这种情况下,目标会告诉您最初单击的是哪个元素。