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

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

Простой
Обьясните про функцию массив?
- 2 подписчика
- 8 часов назад
- 110 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 19 часов назад
- 71 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 23 часа назад
- 64 просмотра
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 30 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 141 просмотр
1

ответ
JavaScript

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

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 52 просмотра
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Разработать Back-end часть веб-приложения

23 нояб. 2024, в 12:39

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

Написать код на языке Python

23 нояб. 2024, в 12:16

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

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

23 нояб. 2024, в 08:36

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

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

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

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

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

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