題目

• 編寫一個通用的事件監聽函式
• 描述事件冒泡的流程
• 無限下拉的圖片列表，如何監聽每個圖片的點選

事件繫結

document.getElementById('btn').addEventListener('click', event => {
  console.log('clicked')
})

// event.target 觸發事件的元素
// event.preventDefault() 阻止預設行為

事件冒泡

基於DOM樹形結構；
事件順著出發元素向上冒泡；
應用場景：時間代理

// event.stopPropagation() 阻止冒泡，只在當前事件觸發節點響應

事件代理

<div id = "div3">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <button>載入更多...</button>
</div>
// 點選載入更多，可以產生更多連結；點選每個連結觸發不同的動作
const div = document.getElementById('div3')
// 統一把子元素的點選事件代理到父元素上，減少程式碼量
// 減少瀏覽器記憶體佔用，不用每個a標籤上繫結事件
// 不可以濫用，瀑布流比較適用
div.addEventListener('click', event => {
  event.preventDefault()
  const target = event.target
  if(target.nodeNamme === 'A') // 如果是A標籤，排除按鈕button觸發的click事件
  // if(target.matches(selector)判斷選擇器是不是當前的觸發元素
    alert(target.innerHTML)
})
 

本文來自部落格園，作者：Max力出奇跡，轉載請註明原文連結：https://www.cnblogs.com/welody/p/15214515.html

如果覺得文章不錯，歡迎點選推薦