<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 作为参数?
我如何知道是否应该使用它?
答案 0 :(得分:1)
我有理解事件属性的问题。
嗯,这不是财产。所有事件处理函数都会自动传递给代表当前正在处理的事件的 event
object 。这个对象可以告诉你很多关于事件发生时的情况(即点击了哪个鼠标按钮,按下了什么键,点击发生时鼠标在屏幕上的位置,触发事件的对象等等) )。
为什么我们在使用诸如之类的属性之前将e作为参数 的preventDefault吗
e.preventDefault()
的语法只是常见的面向对象编程语法:Object.method()
。我们正在访问使用Event
标识符传递给函数的e
对象,然后调用该对象中存储的preventDefault
方法。
这是你如何得到一些特定于对象的行为。 .preventDefault()
不是一个全局函数,你不能单独调用它。它只是event
对象可以执行的操作,因此您必须在调用方法之前引用该对象。
与所有函数参数一样,您可以将参数调用为您喜欢的任何有效名称,但由于该对象将是一个事件对象,e
,evt
和event
是相当的共同。
我如何知道是否应该使用它?
在您的代码中: e.preventDefault()
,表示触发的事件不应执行其内置操作,从而有效取消事件。
您可以在用户启动某些事件的情况下使用此技术,但您的代码确定该进程不应继续。最好的例子是表单的submit
事件。如果用户没有填写所有必填字段,然后点击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>
答案 1 :(得分:0)
event 属性是一个传递给每个事件处理程序的对象。
此事件对象有许多属性和方法,您可以调用它们来处理处理程序中的事件过程和操作。
例如,在事件对象中,您有一个名为preventDefault()
的方法。 <a>
做了什么?每个事件都由页面中的特定html dom元素触发。有时这个html元素会附加行为。例如,<a>
元素有可能更改特定窗口的浏览器URL。如果触发该事件的元素为preventDefault()
,则<a>
只会删除该event
锚点的默认行为,这将避免网址加载/更改。
我建议你找到这个{{1}}对象的引用并给它读一读。因此,您将对其中的内容更加熟悉。