今天我刚刚写了一篇关于“为什么我们在 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>
你会得到:8 和 error:"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保留的单词的原因。