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

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

javascript

Maik Lowrey AlwaysLearning · 技术社区 · 1 年前

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

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

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

2 回复 | 直到 1 年前

Aahan Agarwal 1 年前

在上创建的新事件 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>

控制台输出: