javascript - e/event 属性在 JS 中意味着什么

Question

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

在这段代码中，我不明白一件事。我检查了互联网和 StackOverflow，但找不到任何东西。

我无法理解事件属性。

为什么我们在使用 preventDefault 等属性之前将 e 作为参数？

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

Answer 1

I have a problem to understand event property.

嗯，这不是属性(property)。所有事件处理函数都会自动传递对 event object 的引用。 代表当前正在处理的事件。该对象可以告诉您有关事件发生时的情况的大量信息(即单击了哪个鼠标按钮、按下了哪个键、单击发生时鼠标在屏幕上的哪个位置、哪个对象触发了事件等。 )。

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

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

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

与所有函数参数一样，您可以将参数称为您喜欢的任何有效名称，但由于该对象将是一个事件对象，e、evt 和 event 很常见。

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

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

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

这是一个例子:

// 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>