Метод EventTarget.removeEventListener()
Удаляет обработчик события, который был зарегистрирован при помощи EventTarget.addEventListener()
. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.
Синтаксис
target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);
Параметры
type
-
Строка, описывающая тип события, которое нужно удалить.
listener
-
EventListener
функция, которую нужно удалить с элемента. - options Необязательный
-
Объект опций, описывающий характеристики обработчика события. Доступные опции:
capture
:Boolean
. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любымEventTarget
, находящимся ниже него в дереве DOM.passive
:Boolean
. Указывает на то, чтоlistener
никогда не будет вызыватьpreventDefault()
. В противном случае (еслиlistener
вызоветpreventDefault()
), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.
useCapture
Необязательный-
Указывает, был ли удаляемый
EventListener
зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:false
.Если обработчик был зарегистрирован дважды, один раз с перехватом (с
capture
) и один - без, каждый из них должен быть удалён по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.
Примечание: useCapture
требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр useCapture
.
Возвращаемое значение
undefined
.
Поиск обработчика при удалении
В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра useCapture
/ options.capture
, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для removeEventListener()
в точности тех же параметров, что были переданы в addEventListener()
.
Примечания
Если EventListener
был удалён из EventTarget
в процессе обработки события (например предшествующим EventListener
того же типа), он не будет вызван. После удаления, EventListener
не будет вызываться, однако его можно назначить заново.
Вызов removeEventListener()
с параметрами, не соответствующими ни одному зарегистрированному EventListener
в EventTarget
, не имеет никакого эффекта.
Пример
Это пример добавления и последующего удаления обработчика событий.
js
var div = document.getElementById("div");
var listener = function (event) {
/* do something here */
};
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);
Совместимость браузеров
BCD tables only load in the browser
Gecko примечания
- В версиях Firefox младше версии 6 браузер бросает исключение, если параметр
useCapture
не был явно указан как false. В Gecko младше 9.0,addEventListener()
бросает исключение, если параметрlistener
равенnull
; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.
Opera примечания
- В Opera 12.00 параметр
useCapture
- опциональный (source).
WebKit примечания
- Несмотря на то, что WebKit явно добавил "
[optional]
" к параметруuseCapture
в Safari 5.1 и Chrome 13, это работало и до изменений.
Спецификация
Полифилы для поддержки старых браузеров
addEventListener()
и removeEventListener()
отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать addEventListener()
и removeEventListener()
в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.
js
if (!Element.prototype.addEventListener) {
var oListeners = {};
function runListeners(oEvent) {
if (!oEvent) {
oEvent = window.event;
}
for (
var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type];
iElId < oEvtListeners.aEls.length;
iElId++
) {
if (oEvtListeners.aEls[iElId] === this) {
for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) {
oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent);
}
break;
}
}
}
Element.prototype.addEventListener = function (
sEventType,
fListener /*, useCapture (will be ignored!) */,
) {
if (oListeners.hasOwnProperty(sEventType)) {
var oEvtListeners = oListeners[sEventType];
for (
var nElIdx = -1, iElId = 0;
iElId < oEvtListeners.aEls.length;
iElId++
) {
if (oEvtListeners.aEls[iElId] === this) {
nElIdx = iElId;
break;
}
}
if (nElIdx === -1) {
oEvtListeners.aEls.push(this);
oEvtListeners.aEvts.push([fListener]);
this["on" + sEventType] = runListeners;
} else {
var aElListeners = oEvtListeners.aEvts[nElIdx];
if (this["on" + sEventType] !== runListeners) {
aElListeners.splice(0);
this["on" + sEventType] = runListeners;
}
for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
if (aElListeners[iLstId] === fListener) {
return;
}
}
aElListeners.push(fListener);
}
} else {
oListeners[sEventType] = { aEls: [this], aEvts: [[fListener]] };
this["on" + sEventType] = runListeners;
}
};
Element.prototype.removeEventListener = function (
sEventType,
fListener /*, useCapture (will be ignored!) */,
) {
if (!oListeners.hasOwnProperty(sEventType)) {
return;
}
var oEvtListeners = oListeners[sEventType];
for (
var nElIdx = -1, iElId = 0;
iElId < oEvtListeners.aEls.length;
iElId++
) {
if (oEvtListeners.aEls[iElId] === this) {
nElIdx = iElId;
break;
}
}
if (nElIdx === -1) {
return;
}
for (
var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx];
iLstId < aElListeners.length;
iLstId++
) {
if (aElListeners[iLstId] === fListener) {
aElListeners.splice(iLstId, 1);
}
}
};
}
Смотрите также
EventTarget.addEventListener()
.-
Non-standard
EventTarget.detachEvent()
(en-US).