e/event属性在JS中意味着什么 [英] What does e/event property means in JS

问题描述

<script>
    var ohnoesEl = document.getElementById("ohnoes");
    var onOhNoesClick = function(e) {
        e.preventDefault();
        var audioEl = document.createElement("audio");
        audioEl.src = "https://www.kasandbox.org/programming-sounds/rpg/giant-no.mp3";
        audioEl.autoplay = "true";
        document.body.appendChild(audioEl);
    };
    ohnoesEl.addEventListener("click", onOhNoesClick);
</script>

在这段代码中，我听不懂一件事.我检查了Internet和StackOverflow，但找不到任何东西.

In this code, I didn't understand one thing. I checked internet and StackOverflow but couldn't find anything.

我很难理解事件属性.

为什么在使用诸如 preventDefault 之类的属性之前，我们将 e 用作参数?

Why do we put e as an argument before we use properties such as preventDefault?

我如何知道是否应该使用它?

How will I realize whether I should use it or not?

推荐答案

我在理解事件属性时遇到问题.

好吧，这不是财产.所有事件处理功能都会自动传递给 event 对象 ，代表当前正在处理的事件.该对象可以告诉您事件发生时的情况(例如，单击了哪个鼠标按钮，按下了什么键，单击发生时鼠标在屏幕上的位置，触发事件的对象等).).

Well, it's not a property. All event handling functions are automatically passed a reference to the event object that represents the event currently being handled. This object can tell you quite a bit about the circumstances at the time of the event (i.e. which mouse button was clicked, what key was pressed, where on the screen the mouse was when the click happened, what object triggered the event, etc.).

为什么在使用诸如preventDefault?

e.preventDefault()的语法只是 Object.method()的常见的面向对象编程语法.我们正在访问使用 e 标识符传递到函数中的 Event 对象，然后调用存储在该对象中的 preventDefault 方法.

The syntax of e.preventDefault() is simply common Object-Oriented Programming syntax of: Object.method(). We are accessing the Event object that was passed into the function with the e identifier and then invoking the preventDefault method stored within that object.

这就是您获得某些特定于对象的行为的方式. .preventDefault()不是全局函数，您不能只单独调用它.只是 event 对象可以做的事情，因此您必须在调用该方法之前引用该对象.

It's how you get at some object-specific behavior. .preventDefault() is not a global function, you can't just call it on its own. It's only something that an event object can do, so you have to reference the object before calling the method.

与所有函数自变量一样，您可以使用任意喜欢的有效名称来调用自变量，但是由于该对象将是事件对象，所以 e ， evt 和 event 很常见.

As with all function arguments, you may call the argument any valid name you like, but since the object will be an event object, e, evt, and event are quite common.

我如何知道是否应该使用它?

在您的代码中: e.preventDefault() ，指示被触发的事件不应执行其内置动作，从而有效地取消了该事件.

In your code: e.preventDefault(), indicates that the event that was triggered should not perform its built-in action, effectively cancelling the event.

您将在用户启动某些事件但您的代码确定该过程不应继续的情况下使用此技术.最好的例子是表单的 submit 事件.如果用户没有填写所有必填字段，然后单击 submit 按钮，则我们不希望提交表单，因此我们检查是否填写了必填字段，然后，否则，我们将取消 submit 事件.

You would use this technique in situations where the user has initiated some event, but your code determines that the process should not continue. The best example is with a form's submit event. If the user hasn't filled out all the required fields and then hits the submit button, we don't want the form to be submitted, so we check to see if the required fields were filled in and, if not, we cancel the submit event.

这是一个例子:

// Get a reference to the link:
var link = document.getElementById("nasaLink");

// Set up a click event callback function that will automatically
// be passed a reference to the click event when it occurs. In this
// example, the event will be received as "evt".
link.addEventListener("click", function(evt){ 
  console.clear(); // Cancel previous log entries

  // Get the type of event that was received and the object that triggered it
  console.log("You triggered a " + evt.type + " on :", evt.target)
  
  // Cancelling an event is generally based on some condition
  // Here, we'll make it simple and say that if you click on the 
  // link when the second is an even second, the navigation will be cancelled
  if(new Date().getSeconds() % 2 === 0){
  
    // Normally, clicking a valid hyperlink will navigate you away from the current page
    // But, we'll cancel that native behavior by cancelling the event:
    evt.preventDefault();
    console.log(evt.type + " cancelled! No navigation will occur."); 
  }
  
  console.log("The mouse was postioned at: " + evt.screenX + " x " + evt.screenY);
  
  console.log("The SHIFT key was pressed at the time? " + evt.shiftKey);
  console.log("\tTry clicking again, but with SHIFT held down this time.");
});

<a href="http://www.nasa.gov" id="nasaLink" target="_blank">Click for NASA</a>

这篇关于e/event属性在JS中意味着什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！