addEventListener

HTML codes

<div id='container'>
      container
</div>

addEventListener function

this function listens to the event which is passing through the first parameter
and calls a function which passes through the second parameter


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToBlue(event) {
    event.target.style.backgroundColor = "blue";
}
    container.addEventListener("mouseover", backgroundToBlue);

addEvent "mouseleave"


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToBlue(event) {
    event.target.style.backgroundColor = "blue";
}

function backgroundToPink(event) {
    event.target.style.backgroundColor = "pink";
}

container.addEventListener("mouseover", backgroundToBlue);
container.addEventListener("mouseleave", backgroundToPink);

add randomColor to the target and body


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToNext(event) {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    event.target.style.backgroundColor = "#" + randomColor;
}

const setBg = () => {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = "#" + randomColor;
    color.innerHTML = "#" + randomColor;
}

container.addEventListener("mouseover", setBg);
container.addEventListener("mouseover", backgroundToNext);

Blog

hannaA

HTML codes

addEventListener function

addEvent "mouseleave"

add randomColor to the target and body

Join Our Newsletter. No Spam, Only the good stuff.

Related