BOM DOM

One 、BOM

Be careful ： window Inherit EventTarget

Two 、DOM

1、 Event monitoring

2、 Flow of events - Event Bubbling / Event capture



3、 Properties and methods of event objects

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

//  When calling back this function , It will deliver event Parameters 
spanEL.addEventListener("click", function (event) {
    
  console.log("span Clicked ", event);
  console.log(" Type of event ", event.type);
  //  When clicking occurs, the element that handles clicking is different 
  console.log(" The elements of the event ", event.target, event.currentTarget);
  console.log(" Where the event occurred ", event.offsetX, event.offsetY);
});

//  Common methods 
// preventDefault,  Prevent default behavior 
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
    
  event.preventDefault();
})

// stopPropagation , Prevent event capture