클릭 이벤트 기초 완전 정복

/* ① HTML onclick 속성 */
<button onclick="alert('클릭!')">클릭</button>

/* ② JS onclick 프로퍼티 */
<button id="btn">클릭</button>
<script>
  const btn = document.getElementById('btn');
  btn.onclick = function() {
    alert('클릭!');
  };
</script>

/* ③ addEventListener — 권장 방법 */
<button id="btn2">클릭</button>
<script>
  const btn2 = document.getElementById('btn2');
  btn2.addEventListener('click', function() {
    alert('클릭!');
  });
</script>

<button id="myBtn">클릭해보세요</button>
<p id="result"></p>

<script>
  const btn = document.getElementById('myBtn');
  const result = document.getElementById('result');

  btn.addEventListener('click', function(event) {
    // event 객체에는 클릭 좌표, 타겟 등 정보가 담겨있어요
    result.textContent = `클릭! X: ${event.clientX}, Y: ${event.clientY}`;
  });
</script>

<button id="toggleBtn">🌙 다크모드 켜기</button>

<script>
  const btn = document.getElementById('toggleBtn');
  let isDark = false;

  btn.addEventListener('click', () => {
    isDark = !isDark; // true/false 반전

    if (isDark) {
      document.body.style.background = '#111';
      document.body.style.color = '#fff';
      btn.textContent = '☀️ 라이트모드 켜기';
    } else {
      document.body.style.background = '#fff';
      document.body.style.color = '#111';
      btn.textContent = '🌙 다크모드 켜기';
    }
  });
</script>

<ul id="list">
  <li><button class="del-btn">삭제</button> 항목 1</li>
  <li><button class="del-btn">삭제</button> 항목 2</li>
</ul>

<script>
  const list = document.getElementById('list');

  // 각 li마다 이벤트를 달지 않고, 부모 ul에 하나만 달아요
  list.addEventListener('click', function(event) {
    if (event.target.classList.contains('del-btn')) {
      // 클릭된 것이 삭제 버튼이면, 부모 li 제거
      event.target.closest('li').remove();
    }
  });

  // 나중에 동적으로 추가해도 자동으로 이벤트 적용돼요!
  function addItem(text) {
    const li = document.createElement('li');
    li.innerHTML = `<button class="del-btn">삭제</button> ${text}`;
    list.appendChild(li);
  }
</script>

<form id="myForm">
  <input type="text" id="nameInput" placeholder="이름 입력">
  <button type="submit">제출</button>
</form>
<p id="msg"></p>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 기본 폼 제출(페이지 새로고침) 막기

    const name = document.getElementById('nameInput').value;

    if (!name.trim()) {
      document.getElementById('msg').textContent = '이름을 입력해주세요!';
      return;
    }
    document.getElementById('msg').textContent = `${name}님, 제출 완료!`;
  });
</script>