BOM DOM

一、BOM

注意： window繼承EventTarget

二、DOM

1、事件監聽

2、事件流 - 事件冒泡 / 事件捕獲



3、事件對象的屬性和方法

const spanEL = document.querySelector(".span");

// 在回調這個函數的時候，會傳遞event參數
spanEL.addEventListener("click", function (event) {
    
  console.log("span被點擊", event);
  console.log("事件的類型", event.type);
  // 當發生點擊和處理點擊的元素不一樣
  console.log("事件的元素", event.target, event.currentTarget);
  console.log("事件發生的比特置", event.offsetX, event.offsetY);
});

// 常用的方法
// preventDefault, 防止默認行為
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
    
  event.preventDefault();
})

// stopPropagation ，可阻止事件捕獲