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

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>

Вопрос задан более года назад
111 просмотров

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

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

Помогут разобраться в теме Все курсы

Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Академия Eduson

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

11 месяцев

Далее

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

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

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

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

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

Написано более года назад

Данила @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>

Написано более года назад

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

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

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

Написано более года назад
Aetae @Aetae Куратор тега JavaScript

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

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

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

Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

Написано более года назад

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

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

Написано более года назад

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

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

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

JavaScript

+3 ещё

Простой
Как отправлять обратную связь с сайта в MAX messenger?
- 1 подписчик
- час назад
- 26 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 135 просмотров
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 114 просмотров
0

ответов
JavaScript

+2 ещё

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

ответов
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 161 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 281 просмотр
2

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 250 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 152 просмотра
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 192 просмотра
0

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

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

Web-разработчик/WordPress программист (Full-stack)

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

от 130 000 до 150 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

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

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

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

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

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