movieApp의 pagination을 위해서 구글링을 하던 도중 inline형태로 click이벤트를 추가한것을 보게되었다. 그때, inline과 기존의 AddEvent와는 무슨 차이가 있나 싶어서 찾아보게 되었다.

inline

우선 inline으로 이벤트를 등록하는 방법은 두가지가 있다.

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

첫번째는 HTML 태그에 바로 등록하는 법, 두번째는 JS내에서 태그에 identity를 준다음 onClick 메소드를 이용해서 등록하는 법이다. AddEvent로 등록하는 법은 워낙 기본적이니깐 여기서는 생략하겠다.

차이점

1. 덮어쓰기

inline은 덮어씌어진다. 고로, 여러가지 이벤트를 등록할 수 없다. 반면 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가 실행되지 않는다 practice.js 가 module로 등록되어있어서 그런지 practice안에 있는 그 어떤것도 사용할 수 없더라.

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를 실행하는 것)
하지만 사용할 일이 거의 없다.

결론

HTML inline , JS inline를 통해 이벤트를 등록 하면 scope가 제한적이고, 하나의 이벤트밖에 등록할 수 없으며, 가독성도 좋지 않기에 권장하지 않는 편이나 필요에 따라서는 사용할 수 도 있다!

그렇다면, 성능에서는 얼마나 차이가 날까? 실험해보자!

출처: https://dillionmegida.com/p/inline-events-vs-add-event-listeners/