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

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

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

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

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

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

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

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表單默認(rèn)提交
  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('點(diǎn)擊了：', event.target.textContent);
  }
});
// 動(dòng)態(tài)添加的 li 元素也會(huì)自動(dòng)擁有事件響應(yīng)

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

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