movieAppのページング中にclickイベントをinline形式で追加するのを見ました.その時、インラインと既存のAddEventの違いを考えていたので、検索を始めました.

inline

まず、イベントをオンラインで登録する方法は2つあります.

// code 1
<button onclick="btnClick()">Click Me</button>

<script>
  function btnClick() {
    console.log("Button Clicked")
  }
</script>

// code 2
<button id="myBtn">Click Me</button>

<script>
  var btn = document.getElementById("myBtn")
  btn.onclick = btnClick
  function btnClick() {
    console.log("Button Clicked")
  }
</script>

1つ目の方法はHTMLタグに直接登録し、2つ目の方法はJSでonClickメソッドを使用してタグに識別を提供して登録することです.AddEventとして登録する方法は本来基本ですが、ここでは省略します.

差異

1.上書き

インラインが上書きされます.そのため、各種イベントの登録はできません.逆にaddEventは重複するイベントを登録することができます.

<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>
inline
// Function2

addEvent
// Function3
// Function4

2. scope

HTML inlineを使用する場合、登録されたイベント関数はグローバル宣言後に実行する必要があります.逆にJS inlineやaddEventはグローバルでなくても構わない.

 <div
    onclick="sayYourAddress('ulsan')"
    id="pagination"
  ></div>
  <script src="practice.js" type="module"></script>

import sayYourAddress from './practice2.js';

このようにコードを記述すると、クリックするとsayYourAddressは実行できません.jsがmoduleとして登録されているため、実際のものは何も利用できません.

import sayYourAddress from './practice2.js';

function sayMyName(name) {
  this.name = name;
  this.say = () => {
    alert(`Yes My name is ${this.name}`);
    alert(sayYourAddress('ulsan'));
  };
}
document.querySelector('#pagination').onclick = function () {
  new sayMyName('yeong').say();
};

これでJS inlineが使えます.この場合、匿名関数にはコードが必要です.
特別な発見!
HTML inlineでは、関数スキャンがこのように使用できることがわかりました.

  <div  onclick="function cool(cd){console.log(cd)} cool('cd')"></div>

div出力cdをクリックします.onclickの空間はjsとされているようだ.

3. capture

AddEventの2番目のパラメータをtrueに設定すると、capture機能を使用できます.(HTMLからTARGETまでEVENTを実行)
しかし、利用可能な仕事はほとんどありません.

n/a.結論

HTMLインライン、JSインラインでイベントを登録するのは、範囲が限られていて、1つのイベントしか登録できず、可読性も悪いので、使用をお勧めせず、必要に応じて使用することもできます!
では、性能にはどのくらいの違いがあるのでしょうか.実験してみましょう.
ソース:https://dillionmegida.com/p/inline-events-vs-add-event-listeners/