addEventListener和onclick有什么区别?
var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
上面的代码一起驻留在一个单独的.js文件中,它们都可以完美地工作。
addEventListener和onclick有什么区别?
var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
上面的代码一起驻留在一个单独的.js文件中,它们都可以完美地工作。
当前回答
使用内联处理程序与内容安全策略不兼容,因此addEventListener方法从这个角度来看更安全。当然,您可以使用unsafe-inline来启用内联处理程序,但是,顾名思义,它并不安全,因为它会带来CSP阻止的大量JavaScript漏洞。
其他回答
onclick基本上是一个addEventListener,当元素被单击时,它专门执行一个函数。当你有一个做简单操作的按钮时,它很有用,比如计算器按钮。addEventlistener可以用于很多事情,比如在加载DOM或所有内容时执行一个操作,类似于window。Onload,但有更多的控制。
注意,实际上可以使用内联使用多个事件,或者至少可以使用onclick,用分号分隔每个函数,例如....
我不会写一个内联函数,因为你可能会有潜在的问题,这将是混乱的imo。只需使用它来调用脚本文件中已经完成的函数。
你用哪一个取决于你想要什么。addEventListener用于复杂操作,onclick用于简单操作。我见过一些项目没有为元素附加一个特定的事件监听器,而是实现了一个更全局的事件监听器,它将确定是否点击了按钮,并根据所按的按钮执行某些任务。在我看来,这可能会导致潜在的问题,尽管很小,可能,资源浪费,如果事件监听器必须处理每一个点击
“this”关键字在JavasSript中引用的上下文是不同的。
请看下面的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input id="btnSubmit" type="button" value="Submit" />
<script>
function disable() {
this.disabled = true;
}
var btnSubmit = document.getElementById('btnSubmit');
btnSubmit.onclick = disable();
//btnSubmit.addEventListener('click', disable, false);
</script>
</body>
</html>
它的功能非常简单。当您点击该按钮时,该按钮将自动禁用。
首先,当您尝试以这种方式按钮连接事件时。Onclick = function(), 点击按钮会触发Onclick事件,但是,按钮不会被禁用,因为按钮之间没有显式的绑定。Onclick和Onclick事件处理器。如果你调试看到'this'对象,你可以看到它指向'window'对象。
其次,如果你评论btnSubmit。Onclick =禁用();和取消 / / btnSubmit。addEventListener('点击',禁用,false);您可以看到按钮是禁用的,因为通过这种方式,按钮之间有显式绑定。点击事件和点击事件处理程序。如果你调试为禁用功能,你可以看到“this”指的是按钮控件而不是窗口。
这是我不喜欢JavaScript不一致的地方。 顺便说一句,如果你使用jQuery($('#btnSubmit')。On ('click', disable);),它使用显式绑定。
一个元素对每种事件类型只能有一个事件处理程序,但可以有多个事件监听器。
那么,它的实际情况如何呢?
只有最后分配的事件处理程序才会运行:
const button = document.querySelector(".btn")
button.onclick = () => {
console.log("Hello World");
};
button.onclick = () => {
console.log("How are you?");
};
button.click() // "How are you?"
所有事件监听器将被触发:
const button = document.querySelector(".btn")
button.addEventListener("click", event => {
console.log("Hello World");
})
button.addEventListener("click", event => {
console.log("How are you?");
})
button.click()
// "Hello World"
// "How are you?"
IE注:attachEvent不再支持。从IE 11开始,使用addEventListener: docs。
使用内联处理程序与内容安全策略不兼容,因此addEventListener方法从这个角度来看更安全。当然,您可以使用unsafe-inline来启用内联处理程序,但是,顾名思义,它并不安全,因为它会带来CSP阻止的大量JavaScript漏洞。
let element = document.queryselector('id or classname');
element.addeventlistiner('click',()=>{
do work
})
<button onclick="click()">click</click>`
function click(){
do work
};