代码之家 › 专栏 › 技术社区 › Maik Lowrey

内联事件中创建了多少个事件?

javascript

Maik Lowrey · 技术社区 · 3 年前

基本上我使用 addEventListener 函数将事件绑定到元素。但是您经常看到事件是内联创建的。所以 onclick="fnName(this)" 和 onkeyup="fnName()" 等

问题: 使用示例 <input onkeyup="fnName(this)" /> .

现在是为每个字母创建一个新事件,还是标记参数onkeyup初始化事件一次?
哪种变体需要更少的计算时间?我认为addEventListener更出色,不是吗?

2 回复 | 直到 3 年前

Aahan Agarwal 3 年前

在上创建的新事件 keyup ,可以使用if条件筛选函数中的特定键 event.key == "SOME_KEY"
这是微优化,差异可以忽略不计,没有多大价值。值得一提的是,您可以使用 addEventListener 而它在内联事件中不起作用。

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

<script>
  function function1() {
    console.log("Function1")
  }

  function function2() {
    console.log("Function2")
  }

  function function3() {
    console.log("Function3")
  }

  function function4() {
    console.log("Function4")
  }

  var btn1 = document.getElementById("btn1")
  var btn2 = document.getElementById("btn2")

  btn1.onclick = function1
  btn1.onclick = function2

  btn2.addEventListener("click", function3, false)
  btn2.addEventListener("click", function4, false)
</script>

控制台输出:

Function2
Function3
Function4

注意:这两种方法都会在每个按键上创建一个新的事件,因此没有任何区别。只能对单个/相等数量的事件进行比较。

参考文献:

dillionmegida.com/p/inline-events-vs-add-event-listeners
addEventListener vs onclick

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前