event.js

//events is the change in the state of an object
//they are fired to notify the interesting chnages
//ouse events,keyboard events,form events

let bt = document.querySelector("#btn");

bt.onclick = () => {
    console.log("button was clicked");
}

//js handle is priortized over inline event
//event object;
bt.onclick = (e) => {
    console.log(e);//prints event methods
    console.log(e.type)
    console.log(e.target)
    console.log(e.clientX,e.clientY)

    console.log("override");
}

let d = document.querySelector("div");


d.addEventListener("mouseover",()=>{
console.log("you clicked on div -1")
})//function is called after event is occured;
let handler = ()=>{
console.log("you clicked on div -2")
}
d.addEventListener("mouseover",handler)
d.addEventListener("mouseover",()=>{
console.log("you clicked on div -3")
})
d.addEventListener("mouseover",()=>{
console.log("you clicked on div -4")
})
//here function will be called 4 times and not overriiden;


d.removeEventListener("mouseover",handler) //handler fun is not called now