자바스크립트 클릭 이벤트 예제

1. 기본 클릭 이벤트

버튼을 클릭하면 메시지가 표시됩니다.

<button id="myButton1">클릭하세요!</button>
<p id="message1"></p>

document.addEventListener('DOMContentLoaded', function() {
    const myButton = document.getElementById('myButton1');
    const message = document.getElementById('message1');

    myButton.addEventListener('click', function() {
        message.textContent = '버튼이 클릭되었습니다!';
        message.style.color = 'blue';
    });
});

2. 클릭 횟수 카운터

버튼을 클릭할 때마다 클릭 횟수가 증가합니다.

클릭 횟수: 0

<button id="myButton2">클릭하여 횟수 증가</button>
<p>클릭 횟수: <span id="clickCount">0</span></p>

document.addEventListener('DOMContentLoaded', function() {
    const myButton = document.getElementById('myButton2');
    const clickCountSpan = document.getElementById('clickCount');
    let count = 0; // 클릭 횟수를 저장할 변수

    myButton.addEventListener('click', function() {
        count++; // 횟수 증가
        clickCountSpan.textContent = count; // 화면에 횟수 업데이트
    });
});

3. 토글 버튼 (표시/숨김)

버튼을 클릭할 때마다 특정 단락의 표시/숨김을 전환합니다.

이 내용은 토글 버튼을 클릭하면 나타나거나 사라집니다.

<button id="toggleButton">내용 토글</button>
<p id="toggleContent" style="display: none;">
    이 내용은 토글 버튼을 클릭하면 나타나거나 사라집니다.
</p>

#toggleContent {
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ddd;
}

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('toggleButton');
    const toggleContent = document.getElementById('toggleContent');

    toggleButton.addEventListener('click', function() {
        if (toggleContent.style.display === 'none') {
            toggleContent.style.display = 'block'; // 숨김 상태이면 표시
        } else {
            toggleContent.style.display = 'none'; // 표시 상태이면 숨김
        }
    });
});

4. 동적으로 생성된 요소에 이벤트 추가

JavaScript로 새로운 요소를 생성하고, 그 요소에 클릭 이벤트를 추가합니다.

<button id="addDivButton">새로운 div 추가</button>
<div id="container">
    <!-- 여기에 동적으로 생성된 div가 추가됩니다 -->
</div>

document.addEventListener('DOMContentLoaded', function() {
    const addDivButton = document.getElementById('addDivButton');
    const container = document.getElementById('container');
    let divCount = 0;

    addDivButton.addEventListener('click', function() {
        divCount++;
        const newDiv = document.createElement('div'); // 새로운 div 요소 생성
        newDiv.textContent = `클릭 가능한 div ${divCount}`;
        newDiv.style.padding = '10px';
        newDiv.style.margin = '5px';
        newDiv.style.backgroundColor = '#e0f7fa';
        newDiv.style.border = '1px solid #b2ebf2';
        newDiv.style.cursor = 'pointer'; // 마우스 커서를 포인터로 변경

        // 새로 생성된 div에 클릭 이벤트 추가
        newDiv.addEventListener('click', function() {
            alert(`클릭했습니다: ${newDiv.textContent}`);
        });

        container.appendChild(newDiv); // container에 새로운 div 추가
    });
});