<!-- 行內(nèi)綁定點擊事件 -->
<button onclick="alert('點擊了按鈕')">按鈕1</button>

<!-- 也可以調(diào)用外部函數(shù) -->
<button onclick="handleClick()">按鈕2</button>

<script>
  function handleClick() {
    console.log('按鈕2被點擊');
  }
</script>

<button id="btn3">按鈕3</button>

<script>
  const btn3 = document.getElementById('btn3');
  // 綁定點擊事件
  btn3.onclick = function() {
    console.log('第一次綁定的點擊事件');
  };
  // 后綁定的會覆蓋前一個
  btn3.onclick = function() {
    console.log('第二次綁定的點擊事件（覆蓋了之前的）');
  };
</script>

<button id="btn4">按鈕4</button>

<script>
  const btn4 = document.getElementById('btn4');
  // 綁定第一個點擊事件
  btn4.addEventListener('click', function() {
    console.log('點擊事件1');
  });
  // 綁定第二個點擊事件（不會覆蓋，會依次執(zhí)行）
  btn4.addEventListener('click', function() {
    console.log('點擊事件2');
  });

  // 也可以綁定其他事件（如鼠標移入、移出）
  btn4.addEventListener('mouseenter', function() {
    btn4.style.backgroundColor = 'pink';
  });
  btn4.addEventListener('mouseleave', function() {
    btn4.style.backgroundColor = '';
  });
</script>

const btn3 = document.getElementById('btn3');
btn3.onclick = null; // 解綁點擊事件

<button id="btn5">按鈕5</button>

<script>
  const btn5 = document.getElementById('btn5');
  // 先定義具名函數(shù)（不能用匿名函數(shù)）
  function handleBtn5Click() {
    console.log('按鈕5被點擊');
  }
  // 綁定事件
  btn5.addEventListener('click', handleBtn5Click);
  // 解綁事件（用同一個函數(shù)）
  btn5.removeEventListener('click', handleBtn5Click);
</script>

<button id="btn6">按鈕6</button>
<div id="box" style="width: 200px; height: 200px; background: #eee;"></div>

<script>
  // 1. 點擊按鈕：獲取事件信息
  const btn6 = document.getElementById('btn6');
  btn6.addEventListener('click', function(e) {
    console.log('觸發(fā)事件的元素：', e.target); // 觸發(fā)事件的DOM節(jié)點（按鈕本身）
    console.log('點擊的坐標（相對于頁面）：', e.pageX, e.pageY);
    console.log('是否按了Ctrl鍵：', e.ctrlKey);
  });

  // 2. 常用：阻止默認行為（比如阻止a標簽跳轉(zhuǎn)、表單提交）
  const a = document.createElement('a');
  a.;
  a.textContent = '百度鏈接（點了不跳轉(zhuǎn)）';
  document.body.appendChild(a);
  a.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默認行為（跳轉(zhuǎn)）
    console.log('點擊了鏈接，但沒跳轉(zhuǎn)');
  });

  // 3. 常用：阻止事件冒泡（避免父元素觸發(fā)相同事件）
  const box = document.getElementById('box');
  box.addEventListener('click', function() {
    console.log('點擊了div');
  });
  btn6.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到div
    console.log('點擊了按鈕，不會觸發(fā)div的點擊事件');
  });
</script>

<p id="text">Hello DOM</p>
<button id="toggleBtn">切換樣式</button>

<script>
  const text = document.getElementById('text');
  const toggleBtn = document.getElementById('toggleBtn');
  
  toggleBtn.addEventListener('click', function() {
    text.classList.toggle('active'); // 切換active類
  });
</script>
<style>
  .active {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }
</style>

<input type="text" id="input" placeholder="輸入內(nèi)容...">
<p id="preview"></p>

<script>
  const input = document.getElementById('input');
  const preview = document.getElementById('preview');
  
  // 監(jiān)聽輸入事件（input）
  input.addEventListener('input', function(e) {
    preview.textContent = `你輸入了：${e.target.value}`;
  });
</script>