В этой статье описывается использование добавления и удаления прослушивания в JavaScript. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Слушание событий в JS предназначено для использования AddEventListener для привязки события. Это использование очень распространено и простое в jQuery, но оно сложнее в родном JS. Здесь мы организуем тесты и примеры различных методов события addeventListener для вашей ссылки и обучения.
Когда я работал игроком два дня назад, я столкнулся с некоторыми проблемами удаления монитора и не мог быть удален. Посмотрев на это, я обнаружил, что параметры должны быть полностью соответствуют. Что значит быть полностью соответствующим? Другими словами:
Кода кода следующая: $ ('. Video') [0] .AddeventListener ('TimeUpdate', CurrentTimeHandler, True);
Например, в этом предложении должны быть переданы три параметра, чтобы его можно было удалить. Почему это необходимо? Да, болезненная часть здесь:
При добавлении и удалении третий параметр можно игнорировать, но в настоящее время их ситуация по умолчанию отличается! !
Обычно AddEventListener это ложь ...
1. Добавить пользовательское прослушивание событий
Копия кода выглядит следующим образом: var EventHandlesCounter = 1; // Рассчитайте количество прослушивания добавленного события, 0 используется в качестве зарезервированного бита
функция addEvent (obj, evt, fn) {
if (! fn .__ EventId) {fn .__ EventId = eventHandlesCounter ++;}
if (! obj .__ EventHandles) {obj .__ EventHandles = []; }
if (! obj .__ EventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on"+evt] экземпляр функции) {
obj .__ EventHandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = handleevents;
}
}
obj .__ EventHandles [evt] [fn .__ EventId] = fn;
функция handleevents () {
var fns = obj .__ EventHandles [evt];
для (var i = 0; i <fns.length; i ++)
fns [i] .call (это);
}
}
2. Настройте прослушивание события Delete
Копия кода следующим образом: Функция Delevent (obj, evt, fn) {
if (! obj .__ EventHandles ||! obj .__ EventHandles [evt] ||! fn .__ EventId) {
вернуть ложь;
}
if (obj .__ EventHandles [evt] [fn .__ eventId] == fn) {
Удалить obj .__ EventHandles [evt] [fn .__ EventId];
}
}
3. Исправьте вышеупомянутый метод
Кода кода следующая: функция addEvent (obj, evt, fn, usecapture) {
if (obj.addeventlistener) {// предпочитает использовать регистрацию событий W3C
obj.addeventlistener (evt, fn, !! usecapture);
}еще{
if (! fn .__ EventId) {fn .__ EventId = addEvent .__ EventHandlesCounter ++;}
if (! obj .__ EventHandles) {obj .__ EventHandles = [];}
if (! obj .__ EventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on"+evt]) {
(obj .__ EventHandles [evtype] [0] = obj ["on"+evtype]) .__ eventId = 0;
}
obj ["on"+evtype] = addevent.execeventhandles;
}
}
}
addEvent .__ EventHandlesCounter = 1;
addEvent.execeventhandles = function (evt) {
if (! this .__ Eventhandles) {return true;}
evt = evt || window.event;
var fns = this .__ EventHandles [evt.Type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] encementof function) {
fns [i] .call (это);
}
}
};
Функция Delevent (obj, evt, fn, usecapture) {
if (obj.removeeventListener) {// Сначала удалить обработчик событий с помощью метода W3C
obj.removeeventlistener (evt, fn, !! usecapture);
}еще {
if (obj .__ EventHandles) {
var fns = obj .__ EventHandles [evt];
if (fns) {delete fns [fn .__ eventid];}
}
}
4. Стандартизировать объекты события
Кода кода следующая: function fixevent (evt) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventdefault = fixeVent.preventDefault;
evt.stoppropagation = fixevent.stoppropagation;
if (evt.type == "mouseover") {
evt.RelatedTarget = evt.Fromelement;
} else if (evt.type == "mouseout") {
evt.RelatedTarget = evt.ToElement;
}
evt.charcode = (evt.type == "keypress")? evt.keycode: 0;
evt.eventphase = 2;
evt.timestamp = (new date ()). gettime ();
}
вернуть EVT;
}
fixevent.preventdefault = function () {this.returnvalue = false;}
fixevent.stoppropagation = function () {this.cancelbubble = true;};
Функция FixEvent не выполняется отдельно, она должна иметь параметр объекта события, и она выполняется только при возникновении события! Лучший способ - интегрировать его в выполнение функции addevent.
Скопируйте код следующим образом: addevent.execeventhandles = function (evt) {// Транзизация всех функций обработки событий и выполнить
if (! this .__ Eventhandles) {return true;}
evt = fixevent (evt || window.event); // стандартизировать его здесь
var fns = this .__ EventHandles [evt.Type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] encementof function) {
fns [i] .call (this, evt); // и используйте его в качестве первого параметра функции обработчика событий
// Таким образом, вы можете использовать унифицированный метод для доступа к объекту события в функции обработчика события}}};
Выше написано мастер, и ниже приведены некоторые примеры фактических событий мониторинга
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<голова>
<title> test6.html </title>
<script type = "text/javascript">
функциональный тест () {
window.alert («Вы проголосовали один раз»);
document.getElementbyId ("1"). DepachEvent ("onClick", тест);
}
</script>
</head>
<тело>
<input type = "button" value = "голосовать" id = "1"/>
<script type = "text/javascript">
document.getElementbyId ("1"). AttachEvent ("onClick", тест);
</script>
</body>
</html>
Здесь, document.getElementbyId ("1"). AttachEvent ("onClick", тест); используется для динамического привязки событий, а код копии используется следующим образом:
document.getElementById ("1"). DepachEvent ("OnClick", тест) динамически отменяет время, так что это событие может быть соответствующим только один раз, и никакого эффекта не будет производиться при нажатии на эту кнопку в следующий раз.
Далее, еще одна демонстрация события клавиатуры, которое своевременно контролируется, чтобы определить, является ли вход номером. Если это не число, его будет динамически вызвать, а затем отклонить его вход.
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<голова>
<title> test7.html </title>
<script type = "text/javascript">
Функциональный тест (событие) {
// Каждый раз, когда пользователь нажимает клавишу, он будет определять, является ли это номером
if (event.keycode <48 || event.keycode> 57) {
window.alert («Вы не вводите число»);
вернуть ложь;
}
}
</script>
</head>
<тело>
<input type = "text" onkeypress = "return Test (event);" /> Пожалуйста, введите номер
</body>
</html>
Событие здесь представляет собой объект события, который может вернуть много информации. Пожалуйста, обратитесь к соответствующим документам для получения подробной информации.
Дополнение: совместимость в мониторинге событий
1. IE использует метод AttachEvent/Detachevent для добавления и удаления слушателей событий; W3C использует метод AddEventListener/RemoveEventListener.
2. IE использует метод именования одного препарата для своих событий, в то время как W3C является методом именования для события.
3. Слушатель IE Event использует глобальный объект события, в то время как W3C передает объект события в качестве параметра слушателю.
4. Чтобы избежать запуска поведения событий по умолчанию, подход IE заключается в том, чтобы потребовать от программистов установить значение свойства returnValue в объекте события FALSE, в то время как подход W3C заключается в выполнении метода предотвращения.
5. IE не обеспечивает поддержки фазы захвата событий.
6. Чтобы остановить доставку событий, подход IE заключается в том, чтобы установить отмену объекта события True, в то время как подход W3C заключается в установлении метода выполнения.
7. IE называет слушатель события как независимую функцию, а в W3C он называется как объектный метод. Это означает, что в IE это ключевое слово в случае слушателя событий указывает не на объект возникновения событий, а бесполезный глобальный объект (объект Window).
8. IE имеет проблемы с утечкой памяти при использовании слушателей событий. В браузере IE, если вы хотите создать слушатель событий для элемента и использовать этот элемент в слушателе, пространство памяти, занятое слушателем и связанные узлы DOM, не будут выпущены до того, как пользователь выйдет на другую страницу.
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.