Events and event object

 adding eventlistener

  

   document.getElementById('what').addEventListener(

"click",function(){

console.log('you clicked')

alert("clicked")

})

if you are taking advantage of eventlistener object than you need to pass some argument to function

document.getElementById('what').addEventListener(

"click",function(e){

console.log('you clicked')

let listener=e.offsetX;

         listener=e.offsetY;

console.log(listener)

}) 

preventdefault event

console.log('a')

document.getElementById('btn').addEventListener(

"click",function(e){

console.log('you clicked')

e.preventDefault();

}) 

 other events

 console.log('a')
/*document.getElementById('what').addEventListener(
"dblclick",function(e){
console.log('you clicked')
e.preventDefault();
})
*/
/*document.getElementById('what').addEventListener(
"mousedown",function(e){
console.log('you clicked')\
})*/
/*document.getElementById('what').addEventListener(
"mouseenter",function(e){
console.log('you clicked')
})
document.getElementById('what').addEventListener(
"mouseleave",function(e){
console.log('you leaved')
})*/
/*
document.getElementById('what').addEventListener(
"mousemove",function(e){
console.log('you moved')
console.log(e.offsetX)
console.log(e.offsetY)
})*/

document.getElementById('what').addEventListener(
"mousemove",function(e){
console.log('you moved')
document.getElementById('what').style.backgroundColor ='red'
})