Расширение прослушивания событий DOM для включения атрибутов, свойств и стилей
English - Español - Polski - Pусский - 中文
Эта библиотека позволяет использовать прослушиватели событий как стандартные события, для прослушивания изменений всего, что происходит в DOM. Включая прослушивания изменений html, установку стилей или даже изменения значений полей формы.
Скрипт может быть загружен как в , так и в теле . Все функции загружаются автоматически после загрузки файла
- Примечание: включите этот скрипт перед любыми другими скриптами для правильной реализации *
<script src="/(node_modules|bower_modules)/pikantny/init.min.js"></script>
Начать использовать это так же просто, как просто использовать стандартный метод слушателя
var node = document.querySelector('selector')
node.addEventListener('innerHTML', console.log);
$('selector').on('innerHTML', console.log);
при прослушивании правильных событий есть два разных типа слушателей: прослушиватель обновления до DOM и прослушиватель обновления после DOM. Просто добавив update
в конец любого слушателя, ваше событие сработает после обновления DOM
node.addEventListener('innerHTMLupdate', console.log);
Слушатели события атрибута могут быть добавлены, чтобы обнаружить любые изменения в любых атрибутах
node.addEventListener('id', console.log);
node.setAttribute('id','your-id');
// or
node.id = 'your-id';
Свойства элемента также позволяют прослушивать любые изменения
node.addEventListener('textContent', console.log);
node.textContent = 'new-text';
Любые методы элементов позволяют прослушивать их выполнение
node.addEventListener('appendChild', console.log);
node.appendChild(input);
Стили, связанные с объектом стиля или атрибутом styles, также позволяют прослушивать любые изменения, каждый соответствующий слушатель будет срабатывать, если в атрибуте style задано несколько значений.
node.addEventListener('color', console.log);
node.style.color = '#000';
// or
node.setAttribute('style','color:#000;');
Изменения входного значения также позволяют прослушивать любые изменения и совместимы с IME
input.addEventListener('value', console.log);
Объект события, который передается каждому из этих запущенных событий, обеспечивает аналогичную функциональность, что и стандартный приемник событий DOM.
При вызове из события, предшествующего обновлению DOM, этот метод может использоваться для предотвращения обновления DOM
// innerHTML, textContent, appendChild, etc
node.addEventListener('html', function(e){ e.preventDefault(); });
// input
input.addEventListener('value', function(e){ e.preventDefault(); });
При вызове из события, предшествующего обновлению DOM, этот метод может использоваться для остановки запуска событий обновления после DOM.
node.addEventListener('innerHTML', function(e){ e.stop(); });
// this will not fire
node.addEventListener('innerHTMLupdate', console.log);
При вызове слушатели не всплывают после того, как сработает текущий
При вызове нет слушателей после того, как текущий сработает
Это свойство показывает возвращаемое значение выполненной функции при просмотре в событии обновления DOM после
Показывает значение, которое устанавливается
Показывает предыдущее значение устанавливаемого элемента
Все остальные свойства события следуют тем же правилам, что и стандартный объект Event.
Не позволяйте элементу иметь какие-либо изменения HTML
var node = document.querySelector('selector');
node.addEventListener('html',function(e){e.preventDefault();});
Проверьте входные данные, чтобы увидеть, разрешено ли заданное значение.
Вы можете использовать return false;
или event.preventDefault ();
, чтобы остановить обновление ввода
var input = document.querySelector('selector');
input.addEventListener('value',function(e){ return /^[0-9A-Za-z]+$/.test(e.value); });
Эта библиотека поддерживает панель событий dev console, все добавленные события будут отображаться на этой панели.
Если Вы хотели бы внести свой вклад здесь, шаги
- хранилище клонов: Pikantny Github Repo
- Установите все необходимые зависимости разработки
- скомпилировать проект
npm run build
- проверить ваши изменения не сломайте ничего
npm test
- Сделайте запрос на ваши изменения :)
Вы можете просмотреть лицензию здесь: License