addEventListener

HTML 코드

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

addEventListener 함수

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


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

addEvent "마우스리브"

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);

대상과 본문에 randomColor 추가

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);