How many events are created in the inline event?

Question

Basically I use the addEventListener function to bind events to an element. But you often see that events are created inline. So onclick="fnName(this)" and onkeyup="fnName()" etc.

Questions: Using the example <input onkeyup="fnName(this)" />.

1. is a new event now created for each letter or does the tag parameter onkeyup initialise the event once?
2. Which variant needs less computing time? I assume that addEventListener is more perfomanant, isn't it?

Answer 1

1. New event created on every keyup, you can filter for specific keys in you function using if conditions event.key == "SOME_KEY"

2. It's Micro-optimization with negligible difference, not much worth. A difference worth mentioning, you can multiple functions on same event using addEventListener while it wouldn't work in inline events.

<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>

Output in console:

Function2
Function3
Function4

Note: Both approaches will create a new event on every keyup, thus not making any difference. The comparison can be drawn only for single/equal number of event(s).

References:

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