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

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

+3 ещё

Простой
MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?
- 1 подписчик
- 10 часов назад
- 63 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Ошибка с Babel при сборке Webpack?
- 1 подписчик
- 11 часов назад
- 41 просмотр
1

ответ
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 1 подписчик
- 12 часов назад
- 40 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как добавить параметры стиля и другие атрибуты в ячейку DataTables в режиме server-side?
- 1 подписчик
- 22 часа назад
- 40 просмотров
1

ответ
JavaScript

Простой
Почему на сайтах в js коде используются непонятные однобуквенные переменные и что они значат?
- 1 подписчик
- вчера
- 6104 просмотра
6

ответов
JavaScript

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

ответ
JavaScript

+2 ещё

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

ответов
JavaScript

+2 ещё

Средний
Как давать ссылку на скачивание только после подписки на канал в телеграмме?
- 1 подписчик
- 11 нояб.
- 818 просмотров
2

ответа
JavaScript

+2 ещё

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

ответ
JavaScript

+1 ещё

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

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

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

MakeDifference

от 30 000 до 80 000 ₽

Организовать CI\CD для группы фрилансеров и настроить VLESS-сервер

14 нояб. 2024, в 04:59

800 руб./в час

Нужна автоматизация POST запросов

14 нояб. 2024, в 03:54

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

Проект по tableau от Яндекс Практикум

14 нояб. 2024, в 03:42

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

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, смотрите, что именно изменилось. Если изменился цвет фона, то эмитите своё событие.

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

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

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

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