JavaScript onclick 여러개 이벤트

JavaScript에서 한 요소에 두 개 이상의 이벤트를 추가하려면 다음과 같은 방법을 사용할 수 있습니다.

 

1. 함수를 호출하여 이벤트 핸들러 연결:

// HTML
<button id="myButton">Click me</button>

// JavaScript
function firstEvent() {
  alert("첫 번째 이벤트");
}

function secondEvent() {
  alert("두 번째 이벤트");
}

document.getElementById("myButton").addEventListener("click", firstEvent);
document.getElementById("myButton").addEventListener("click", secondEvent);

 

 

 

위의 예제에서는 `addEventListener`를 사용하여 동일한 요소에 두 개의 클릭 이벤트 핸들러를 추가했습니다. 클릭 이벤트가 발생하면 두 함수 `firstEvent`와 `secondEvent`가 실행됩니다.

2. 익명 함수를 사용하여 이벤트 핸들러 추가:


// HTML
<button id="myButton">Click me</button>

// JavaScript
document.getElementById("myButton").addEventListener("click", function() {
  alert("첫 번째 이벤트");
});

document.getElementById("myButton").addEventListener("click", function() {
  alert("두 번째 이벤트");
});

위의 예제에서는 익명 함수를 사용하여 두 개의 클릭 이벤트 핸들러를 추가했습니다. 이것은 간단한 이벤트 핸들러를 만들어서 사용하는 방법입니다.

두 가지 방법 모두 동일한 요소에 여러 개의 이벤트 핸들러를 연결하는 방법입니다. 이렇게 하면 하나의 이벤트가 발생할 때 여러 개의 동작을 수행할 수 있습니다.