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

Вход в полноэкранный режим Выход из полноэкранного режима

добавить 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);

Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий