여러 개의 `onclick` 이벤트를 요소(element)에 추가하는 방법은 JavaScript를 사용하여 가능합니다. 이렇게 하려면 해당 요소를 선택하고 각 이벤트 핸들러를 연결해야 합니다. 아래는 자세한 단계별 설명입니다:
1. HTML 요소 선택:
먼저 이벤트를 추가하려는 HTML 요소를 JavaScript로 선택해야 합니다. 요소를 선택하는 방법은 `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()` 등 다양합니다. 예를 들어, `id` 속성을 가진 요소를 선택하려면 다음과 같이 할 수 있습니다:
html
<button id="myButton">클릭하세요</button>
javascript
const myButton = document.getElementById("myButton");
2. 이벤트 핸들러 함수 정의:
각각의 `onclick` 이벤트에 실행할 함수를 정의합니다. 예를 들어, 두 개의 다른 함수를 정의하겠습니다:
function handleClick1() {
alert("첫 번째 버튼을 클릭했습니다.");
}
function handleClick2() {
alert("두 번째 버튼을 클릭했습니다.");
}
3. 이벤트 핸들러 연결:
선택한 요소에 각 이벤트 핸들러를 연결합니다. 이를 위해 `addEventListener` 메서드를 사용할 수 있습니다. 요소에 여러 이벤트 핸들러를 연결하려면 각 이벤트에 대해 `addEventListener`를 호출하면 됩니다.
myButton.addEventListener("click", handleClick1);
myButton.addEventListener("click", handleClick2);
이제 해당 요소를 클릭할 때마다 두 함수가 순서대로 실행됩니다.
다음은 전체 예제 코드입니다:
<!DOCTYPE html>
<html>
<head>
<title>여러 개의 onclick 이벤트 추가</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
function handleClick1() {
alert("첫 번째 버튼을 클릭했습니다.");
}
function handleClick2() {
alert("두 번째 버튼을 클릭했습니다.");
}
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", handleClick1);
myButton.addEventListener("click", handleClick2);
</script>
</body>
</html>
위의 코드는 하나의 버튼에 두 개의 다른 `onclick` 이벤트 핸들러를 추가하는 예제입니다. 버튼을 클릭하면 두 함수가 실행됩니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| JavaScript onclick 여러개 이벤트 (0) | 2023.10.06 |
|---|---|
| DB Connection Pool 이란? (0) | 2023.10.05 |
| $(document).ready 여러개 사용 (0) | 2023.09.26 |
| 어필리에이트 신청 방법(쿠팡, 알리익스프레스 등등) (0) | 2023.09.25 |
| JavaScript button 클릭시 닫기 이벤트 (0) | 2023.09.21 |