js- Events

addEventListner:

----------------

Eg1:------

document.getElementById('heading').addEventListener('click',function(e){

    console.log("you have clicked heading");

    console.log(e);

    // console.log(e.target);

    // console.log(e.target.id);

    // console.log(e.target.className);

    // console.log(e.target.classList);

    // console.log(Array.from(e.target.classList));

    // location.href = '//google.com'

    // console.log(e.offsetX); 

    // console.log(e.offsetY);

    // console.log(e.clientX);

    // console.log(e.clientY);

})

eg2:------

document.getElementById('heading').addEventListener('mouseover',function(e){

    console.log("you have clicked heading");  

})

eg3:--------

// let c = document.getElementById("btn")

// c.addEventListener('click',function(e){

//     console.log("button clicked");

// })

        // OR

let d = document.getElementById("btn");

d.addEventListener("click", func)

function func(e){

    console.log("thanks",e);

    e.preventDefault();

}

eg4-------(dblclick)

let d = document.getElementById("btn");

d.addEventListener("click", func1);

d.addEventListener("dblclick", func2);

function func1(e){

    // console.log("thanks",e);

    e.preventDefault();

}

function func2(e) {

  console.log("thanks", e);

  e.preventDefault();

}

eg5-------(mouseevent)

let d = document.getElementById("btn");

// d.addEventListener("mousedown", func1);

// d.addEventListener("mouseup", func1);

// d.addEventListener("mouseenter", func1);

// d.addEventListener("mouseleave", func1);

d.addEventListener("mousemove", func1);

function func1(e){

    console.log(`thanks its a ${e.type}`);

    e.preventDefault();

}

eg6--------(mousemove)

document.querySelector(".container").addEventListener('mousemove',function(e){

    console.log(`thanks its a ${e.type}`);

    console.log(`your X axis is ${e.offsetX}`);

    console.log(`your Y axis is ${e.offsetY}`);

    document.body.style.backgroundColor = `rgb(${e.offsetX},${e.offsetY},${e.offsetY})`;

    e.preventDefault();

})