[Javascript] onclick vs addEventListener("click")

onclick vs addEventListener("click")

	onclick	addEventListener("click")
공통점	- 이벤트 수신 - 콜백 함수 실행 가능
차이점	- 요소의 속성임 - 속성값은 덮어쓰기가 되므로 둘 이상의 이벤트를 동시에 핸들링 할 수 없음	- 요소에 이벤트 헨들러 추가 - "on" 접두사 없이 사용 - 요소에 이벤트 헨들러를 덮어쓰지 않고 제한 없이 추가 가능
사용법	- html: <button onclick='testFunc1()'> - js: testBtn.onclick = testFunc1;	js: testBtn.addEventListener("click", testFunc1);

 

예시

onclick

<button id="test-btn" onclick="clickBtn1()">CLICK ME!!</button>

<script>
$testBtn = document.querySelector("#test-btn");

$testBtn.onclick = clickBtn2;
$testBtn.onclick = clickBtn3;

function clickBtn1() {
    console.log("click test 1");
}

function clickBtn2() {
    console.log("click test 2");
}

function clickBtn3() {
    console.log("click test 3");
}
</script>

 

addEventListener("click")

<button id="test-btn" onclick="clickBtn1()">CLICK ME!!</button>

<script>
$testBtn = document.querySelector("#test-btn");

$testBtn.addEventListener("click", clickBtn2);
$testBtn.addEventListener("click", clickBtn3);

function clickBtn1() {
    console.log("click test 1");
}

function clickBtn2() {
    console.log("click test 2");
}

function clickBtn3() {
    console.log("click test 3");
}
</script>

 

 

참고

• https://www.geeksforgeeks.org/difference-between-addeventlistener-and-onclick-in-javascript/