<button onclick="alert('Clicked!')">點擊我</button>

const btn = document.querySelector('button');
btn.onclick = function() {
  console.log('按鈕被點擊');
};
// 缺點：無法綁定多個相同事件

btn.addEventListener('click', function(event) {
  console.log('第一次點擊');
});

btn.addEventListener('click', () => {
  console.log('第二次點擊'); // 可以綁定多個處理函數(shù)
});

element.addEventListener('click', function(event) {
  console.log(event.target); // 觸發(fā)事件的元素
  console.log(event.clientX, event.clientY); // 鼠標坐標
  event.preventDefault(); // 阻止默認行為（如表單提交）
  event.stopPropagation(); // 阻止事件冒泡
});

// 第三個參數(shù)為 true 表示捕獲階段，false 表示冒泡階段（默認）
parent.addEventListener('click', () => {
  console.log('父元素捕獲階段');
}, true);

child.addEventListener('click', () => {
  console.log('子元素冒泡階段');
});

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表單默認提交
  const input = document.querySelector('#username');
  console.log('輸入的值：', input.value);
});

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('點擊了：', event.target.textContent);
  }
});
// 動態(tài)添加的 li 元素也會自動擁有事件響應(yīng)

const handler = () => { console.log('Click') };
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

window.addEventListener('scroll', function(e) {
  // 邏輯代碼
}, { passive: true });