Мы можем настроить события для достижения более гибкой разработки. События могут быть очень мощным инструментом при правильном использовании. Развитие на основе событий имеет много преимуществ (представлено позже).
Функции с пользовательскими событиями - это события, зажигание и диспетчер.
Настраивать события напрямую, используя конструктор событий:
var event = new Event ('build'); // прослушивать event.elem.addeventListener ('build', function (e) {...}, false); // dispatch the Event.elem.dispatchevent (event);Customevent может создать более индивидуальное событие, а также может сопровождаться некоторыми данными. Конкретное использование следующего:
var myevent = new Customevent (EventName, Options);
Где могут быть варианты:
{detail: {...}, Bubbles: true, отмену: false}Деталь может хранить некоторую информацию инициализации и может быть вызвана при запуска. Другие свойства - определить, имеет ли событие пузырьковые и другие функции.
Встроенные события будут вызваны браузером в соответствии с определенными операциями, а индивидуальные события должны быть запускаются вручную. Функция DispatchEvent используется для запуска события:
element.dispatchevent (Countomevent);
Приведенный выше код указывает на то, что событие Customevent запускается на элементе. Вместе используйте его:
// Добавить соответствующее событие прослушивание.
Используйте пользовательские события, чтобы обратить внимание на проблемы совместимости, но использовать jQuery намного проще:
// Связано пользовательское событие $ (element) .on ('mycustomevent', function () {}); // запустить событие $ (element) .trigger ('mycustomevent'); Кроме того, вы можете передавать больше информации о параметрах при запуска пользовательского события: $ ("p") .on ("mycustomevent", function (event, myname) {$ (this) .text (myname + ", hi there!");}); $ ("Кнопка") .click (function () {$ ("p") .trigger ("mycustmement yehdervent");Пользовательские события JavaScript отличаются от самостоятельных событий, таких как клик и отправка. Прежде чем описать преимущества пользовательских событий, давайте посмотрим на пример пользовательских событий:
<div id = "testbox"> </div> // Создание события var evt = document.createevent ('event'); // определить тип события evt.initevent ('customevent', true, true); // слушать событие var obj = document.getelementbyid ('testbox'); obj.addeventlieser ('customevent', function ('console. запускается ');}, false);Для конкретных эффектов вы можете проверить демонстрацию. Введите obj.dispatchevent (EVT) в консоли. Вы можете видеть, что вывод «событие Countomevent запускается» в консоли, что указывает на то, что настраиваемое событие было успешно инициировано.
В этом процессе метод Createevert создает пустое событие EVT, затем использует метод Initevent для определения типа события как согласованного пользовательского события, а затем слушает соответствующий элемент. Затем используйте DispatchEvent, чтобы запустить событие.
Правильно, механизм пользовательских событий похож на обычное событие - прослушивание событий, написание операций обратного вызова и выполнение обратных вызовов после запуска событий. Но разница в том, что нами полностью контролируются пользовательские события, что означает, что реализация развязки JavaScript. Мы можем гибко контролировать несколько связанных, но логически сложных операций, используя механизм пользовательских событий.
Конечно, вы, возможно, догадались, что вышеуказанный код не вступает в силу в более низких версиях IE. На самом деле, CreateeVent () не поддерживается в IE8 и ниже версий IE, но есть метод Private FireVent () IE, но, к сожалению, FireVent только поддерживает запуск стандартных событий. Поэтому мы можем использовать только один особый и простой метод для запуска пользовательского события.
// Тип - это пользовательское событие, такое как type = 'customevent', обратный вызов - это функция обратного вызова, фактически определенную разработчиком obj [type] = 0; obj [type] ++; obj.attachevent ('OnpropertyChange', function (event) {if (event.propertyName == type) {callback.call (obj);}});Принцип этого метода на самом деле состоит в том, чтобы добавить пользовательское свойство в DOM и прослушать событие PropertyChange элемента. При изменении значения определенного свойства в DOM будет инициировано обратный вызов PropertyChange, а затем в обратном вызове определяется, является ли измененное свойство нашим собственностью. Если это так, то обратный вызов, фактически определенный разработчиком, будет выполнен. Это имитирует механизм пользовательских событий.
Чтобы позволить механизму пользовательских событий сотрудничать с прослушиванием и моделируемым запусками стандартных событий, здесь приведен полный механизм событий. Этот механизм поддерживает мониторинг стандартных событий и пользовательских событий, а также удаляет операции прослушивания и моделируемого запуска. Следует отметить, что для того, чтобы прояснить логику кода, согласовано, что пользовательские события имеют префикс «пользовательского» (например: CustomStest, Customalert).
/ *** @description Содержит прослушивание событий, удаление и моделирование, запускающееся, поддерживающие цепочные вызовы**/ (function (window, undefined) {var ev = window.ev = window. $ = function (element) {return new ev.fn.init (element);}; // construction ev.fn = ev.prototype = {inite: inement) {this.element ev.fn = ev.prototype = {init: inement) {this. == 1)? > } var fnev = function (event) {event = event? ! return _that; > > / ** @supported для других* / _that.element ['on' + type] = null; if (_that.element.dispatchevent) {// Создание события var evt = document.createvent ('event'); type.indexof (Custom ')! = -1) {_That.Element [type] ++; Тестовый случай 1 (пользовательский тест события) // Тестовый пример 1 (пользовательский тест на событие) // Внедрение механизма событий // ... // Catch Domvar TestBox = Document.getElementById ('testbox'); // Функция обратного вызова 1Funct CustomConsole ');} // Encapsulation Testbox = $ (testbox); // Связывать две функции обратного вызова одновременно, поддерживающий цепный вызов с testbox.add (' CustomConsole ', Triggerevent) .Add (' CustomConsole ', TriggerAgain);Полный код в демонстрации.
После открытия демонстрации, Call Testbox.trigger ('CustomConsole') в консоли, чтобы запустить пользовательское событие само по себе. Вы можете видеть, что консоль выводит два подсказок, а затем введите Testbox.remove ('CustomConsole', TriggerAgain), чтобы удалить следующего слушателя. В настоящее время используйте testbox.trigger ('CustomConsole'), чтобы запустить пользовательское событие. Вы можете видеть, что консоль выводит только одну подсказку, то есть следующий слушатель успешно удален. Все функции механизма событий работают нормально.