事件侦听器的范围

edddd:

我已经向该按钮添加了一个事件监听器:

<button id="start" onclick="start();">Start</button>

如果我start()在js文件的全局作用域中定义函数,那么它就可以正常工作。

function start() {
  console.log("start clicked");
}

但是,如何避免赋予它全球范围?如果我addEventListener在本地范围内使用添加了事件侦听器是否可以使用还有其他办法吗?使用HTML添加事件侦听器是一种不好的做法吗?

宫殿:

使用内联事件处理程序通常不是一个好主意如以上链接所述:

您可以找到许多事件处理程序属性的HTML属性等效项。但是,您不应该使用这些-它们被认为是不好的做法。如果您只是在快速地做某事,使用事件处理程序属性似乎很容易,但是它们很快变得难以管理且效率低下。

最好addEventListener在本地范围内使用,例如:

const btn = document.querySelector('#start');

function start() {
  console.log("start clicked");
}   

btn.addEventListener('click', start);
<button id="start">Start</button>

再次,如上述链接所述:

与前面讨论的旧机制相比,此机制具有一些优势。首先,有一个对等函数removeEventListener(),它删除了先前添加的侦听器。这对于简单的小型程序而言并不重要,但是对于大型,更复杂的程序而言,它可以提高清理旧的未使用事件处理程序的效率。

另外,例如,这允许您使同一按钮在不同情况下执行不同的动作-您要做的就是适当地添加或删除事件处理程序。

其次,您还可以为同一个侦听器注册多个处理程序。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章