Как создать уникальное событие?

Question

Hidden Fronter @AlTerminator

JavaScript

Как создать уникальное событие?

Как на чистом JS создать событие, которое выдает сообщение alert с текстом "bodybgcolorchange сработало!", когда цвет элемента body меняется?

<html>
<body onload="bodyload()">
<button onclick="colorchangerclick()">newcolor</button>
<script>
function bodyload()
{


 const constbodybgcolorchange = new CustomEvent("bodybgcolorchange", {
   detail: {
     name: "bodybgcolor",
   },
 });
 
 document.body.addEventListener("bodybgcolorchange", () => alert("bodybgcolorchange сработало!"));
 
 document.body.dispatchEvent(constbodybgcolorchange);


}

function colorchangerclick()
{
 document.body.style.background = prompt("Значение");
}
</script>
</body>
</html>

Вопрос задан 24 сент.
107 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 2

2 комментария

Hidden Fronter @AlTerminator Автор вопроса

Когда задний фон red и снова задаю red, то событие выполняется, а нужно, чтобы выполнялось только при смене заднего фона body. Пишу аналог нативного события "change".

Написано 24 сент.

Данила @grantur5707

Hidden Fronter,

<html>
<body onload="bodyload()">
<button onclick="colorchangerclick()">newcolor</button>
<script>
function bodyload() {
  document.body.addEventListener("bodybgcolorchange", () => alert("bodybgcolorchange сработало!"));
}

function colorchangerclick() {
  const currentColor = document.body.style.background;

  const newColor = prompt("Введите новый цвет фона (например, red, #000, rgb(0, 0, 0))");

  if (newColor && newColor !== currentColor) {
    document.body.style.background = newColor;

    const bodybgcolorchange = new CustomEvent("bodybgcolorchange", {
      detail: {
        name: "bodybgcolor",
        oldColor: currentColor,
        newColor: newColor,
      },
    });

    document.body.dispatchEvent(bodybgcolorchange);
  }
}
</script>
</body>
</html>

Написано 24 сент.

4 комментария

Hidden Fronter @AlTerminator Автор вопроса

а для iOS 6 есть варианты? Mutation Observer требует iOS7+.

Написано 24 сент.
Aetae @Aetae Куратор тега JavaScript

Hidden Fronter, два варианта:
Очевидный: setTimeout\setInterval и долбить сверяя предыдущее значение с текущим.
Хакерский: подменить в HTMLBodyElement.prototype свойства style, bgColor и методы setAttribute\setAttributeNS и слушать там изменения.

Второй вариант требует хорошего понимания js, зато позволит делать честное событие, которое можно отменять. Первого достаточно в большинстве случаев, плюс он может реагировать на изменения в css, если долбить не сам стиль, а getComputedStyle.

В целом же, по-хорошему, такое событие вообще не нужно, надо искать код который вам меняет цвет и в него внедряться, а не реагировать на внешние изменения.

Написано 25 сент.
Hidden Fronter @AlTerminator Автор вопроса

Aetae, можно подробнее про хакерский вариант?

Написано 25 сент.

Aetae @Aetae Куратор тега JavaScript

Hidden Fronter, вот так, для примера:

function dispatch(value, cancelable = false) {
  const bodybgcolorchange = new CustomEvent("bodybgcolorchange", {
    detail: {
      name: "bodybgcolor",
      value
    },
    cancelable
  });

  return document.body.dispatchEvent(bodybgcolorchange);
}

function patchStyle() {
  // уже попатчен, ничего не делаем
  if (Object.hasOwn(HTMLBodyElement.prototype, 'style')) return;

  // берём дескриптор style из HTMLElement
  const {get, ...rest} =  Object.getOwnPropertyDescriptor(
    HTMLElement.prototype, 
    'style'
  );

  // задаём дескриптор style в HTMLBodyElement
  Object.defineProperty(HTMLBodyElement.prototype, 'style', {
    ...rest,
    get() {
      // оборачиваем возврат геттера в прокси
      return new Proxy(get.call(this), {
        // слушаем установку свойств style
        set(target, key, value) {
          // если нужный ключ и событие отменено - ничего не делаем
          if (key === 'backgroundColor' && !dispatch(value, true)) 
            return;
          
          // иначе устанавливаем значение как обычно
          target[key] = value;
        }
      })
    }
  })

  // не хватает обработки set style
  // не хватает обработки set style[number]
  // не хватает обработки set style.background
  // не хватает обработки set cssText
  // не хватает подмены setProperty
  // ...
}

patchStyle();

document.body.addEventListener("bodybgcolorchange", (event) => {
  console.log(event);

  if(!confirm(`Разрешить смену цвета на ${event.detail.value}?`)) {
    event.preventDefault()
  }
});


document.body.style.backgroundColor = '#f00';

Всё расписывать не буду, но примерно также подменяем остальные свойства и методы, которые имеют шансы повлиять на нужное значение.

Написано 25 сент.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Средний
Как заставить предупреждение срабатывать только после нажатия «Да/Нет» в диалоговом окне?
- 1 подписчик
- 6 часов назад
- 45 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как реализовать перемещение между табами через стрелки?
- 2 подписчика
- 9 часов назад
- 68 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как давать ссылку на скачивание только после подписки на канал в телеграмме?
- 1 подписчик
- вчера
- 159 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Какой плагин для маски номера посоветуете?
- 3 подписчика
- вчера
- 210 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как избежать зависание textarea при обработке большого массива?
- 3 подписчика
- вчера
- 213 просмотров
3

ответа
JavaScript

+1 ещё

Простой
В чём ошибка js?
- 1 подписчик
- вчера
- 175 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Как установить старый проект на Windows?
- 1 подписчик
- 10 нояб.
- 197 просмотров
2

ответа
JavaScript

Простой
Почему console log не видит класс?
- 1 подписчик
- 09 нояб.
- 133 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как шарить изображения в telegram mini apps js?
- 1 подписчик
- 09 нояб.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отправить HTTP на локальный сервер?
- 1 подписчик
- 08 нояб.
- 181 просмотр
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Fullstack JavaScript разработчик

MakeDifference

от 30 000 до 80 000 ₽

Выполнить тестовое задание в Сваггер

12 нояб. 2024, в 19:27

1000 руб./за проект

Разработка базы данных

12 нояб. 2024, в 19:03

10000 руб./за проект

Сбор данных по wildberries/ozon

12 нояб. 2024, в 18:57

500000 руб./за проект

Answer 1 · 2024-09-24 20:48:34

<html>
<body onload="bodyload()">
<button onclick="colorchangerclick()">newcolor</button>
<script>
function bodyload() {
  document.body.addEventListener("bodybgcolorchange", () => alert("bodybgcolorchange сработало!"));
}

function colorchangerclick() {
  document.body.style.background = prompt("Введите новый цвет фона (например, red, #000, rgb(0, 0, 0))");

  const bodybgcolorchange = new CustomEvent("bodybgcolorchange", {
    detail: {
      name: "bodybgcolor",
    },
  });

  document.body.dispatchEvent(bodybgcolorchange);
}
</script>
</body>
</html>

Answer 2 · 2024-09-24 20:58:44

Вешаете на body MutationObserver, следящий за изменение атрибута style, смотрите, что именно изменилось. Если изменился цвет фона, то эмитите своё событие.

Как создать уникальное событие?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт