Есть ли способ удалить прослушиватель событий, добавленный следующим образом:
element.addEventListener(event, function(){/* do work here */}, false);
Без замены элемента?
Есть ли способ удалить прослушиватель событий, добавленный следующим образом:
element.addEventListener(event, function(){/* do work here */}, false);
Без замены элемента?
Невозможно полностью удалить обработчик событий, если вы не сохранили ссылку на обработчик событий при создании.
Обычно я добавляю их к основному объекту на этой странице, а затем вы можете выполнять итерацию и аккуратно избавляться от них, когда закончите с этим объектом.
addEventListener
возвращает undefined
по крайней мере в некоторых случаях. Например, в контексте BroadcastChannel.
- person BairDev; 19.09.2018
getEventListeners
- person Jason Gross; 29.12.2018
Вы можете удалить прослушиватель событий следующим образом:
element.addEventListener("click", function clicked() {
element.removeEventListener("click", clicked, false);
}, false);
arguments.callee
, а именованное выражение функции должно работать нормально, поэтому я отредактировал свой ответ.
- person icktoofay; 23.03.2015
Самый простой способ удалить все прослушиватели событий для элемента - присвоить его outerHTML
самому себе. Это отправляет строковое представление HTML через синтаксический анализатор HTML и назначает проанализированный HTML элемент. Поскольку JavaScript не передается, связанных прослушивателей событий не будет.
document.getElementById('demo').addEventListener('click', function(){
alert('Clickrd');
this.outerHTML = this.outerHTML;
}, false);
<a id="demo" href="javascript:void(0)">Click Me</a>
Единственное предостережение - это делегированные прослушиватели событий или прослушиватели событий в родительском элементе, которые отслеживают каждое событие, соответствующее набору критериев для его дочерних элементов. Единственный способ избежать этого - изменить элемент так, чтобы он не соответствовал критериям делегированного прослушивателя событий.
document.body.addEventListener('click', function(e){
if(e.target.id === 'demo') {
alert('Clickrd');
e.target.id = 'omed';
}
}, false);
<a id="demo" href="javascript:void(0)">Click Me</a>
Старый вопрос, но вот решение.
Строго говоря, вы не можете удалить анонимного прослушивателя событий, если не сохраните ссылку на функцию. Поскольку цель использования анонимной функции, по-видимому, не заключается в создании новой переменной, вы можете вместо этого сохранить ссылку в самом элементе:
element.addEventListener('click',element.fn=function fn() {
// Event Code
}, false);
Позже, когда вы захотите удалить его, вы можете сделать следующее:
element.removeEventListener('click',element.fn, false);
Помните, что третий параметр (false
) должен иметь то же значение, что и для добавления прослушивателя событий.
Однако сам вопрос напрашивается другой: почему?
Есть две причины использовать .addEventListener()
вместо более простого .onsomething()
метода:
Во-первых, он позволяет добавить несколько прослушивателей событий. Это становится проблемой, когда дело доходит до их выборочного удаления: вы, вероятно, в конечном итоге дадите им имена. Если вы хотите удалить их все, outerHTML
решение от @ tidy -iant отлично подойдет.
Во-вторых, у вас есть возможность выбрать захват, а не пузырек события.
Если ни одна из причин не важна, вы можете решить использовать более простой onsomething
метод.
Вы можете попробовать перезаписать element.addEventListener
и делать все, что хотите.
Что-то вроде:
var orig = element.addEventListener;
element.addEventListener = function (type, listener) {
if (/dontwant/.test(listener.toSource())) { // listener has something i dont want
// do nothing
} else {
orig.apply(this, Array.prototype.slice.apply(arguments));
}
};
ps: не рекомендуется, но поможет (не тестировал)
EventTarget.prototype.addEventListener
. Это сработало для меня
- person Lorcan O'Neill; 26.01.2016
Назначить обработчики событий с помощью буквальных функций сложно - их не только невозможно удалить, не клонируя узел и не заменив его клоном - вы также можете непреднамеренно назначить один и тот же обработчик несколько раз, что не может произойти, если вы используете ссылка на обработчик. Две функции всегда рассматриваются как два разных объекта, даже если они идентичны по символам.
element.onmouseover=function
все равно не будет работать из-за защиты песочницы. См. commons.oreilly.com/wiki/index.php / Greasemonkey_Hacks /.
- person Brock Adams; 24.06.2010
Изменить: в соответствии с предложением Manngo для каждого комментария следует использовать .off () < / strong> вместо .unbind (), поскольку .unbind () устарел с jQuery 3.0 и заменен начиная с jQuery 1.7.
Несмотря на то, что это старый вопрос и в нем не упоминается jQuery, я опубликую здесь свой ответ, поскольку это первый результат для searchterm 'jquery remove anonymous event handler'.
Вы можете попробовать удалить его с помощью функции .off ().
$('#button1').click(function() {
alert('This is a test');
});
$('#btnRemoveListener').click(function() {
$('#button1').off('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Click me</button>
<hr/>
<button id="btnRemoveListener">Remove listener</button>
Однако это работает, только если вы добавили слушателя с помощью jQuery, а не . addEventListener
Нашел это здесь.
.off()
.unbind()
.
- person Manngo; 07.07.2018
Если вы используете jQuery, попробуйте off
метод
$("element").off("event");
Метод jquery .off () удаляет обработчики событий, которые были прикреплены с помощью .on ()
С помощью спецификации языка ECMAScript2015 (ES2015, ES6) можно использовать эту nameAndSelfBind
функцию, которая волшебным образом превращает анонимный обратный вызов в именованный и даже связывает его тело с собой, позволяя слушателю событий удалить себя изнутри, а также его для удаления из внешней области (JSFiddle):
(function()
{
// an optional constant to store references to all named and bound functions:
const arrayOfFormerlyAnonymousFunctions = [],
removeEventListenerAfterDelay = 3000; // an auxiliary variable for setTimeout
// this function both names argument function and makes it self-aware,
// binding it to itself; useful e.g. for event listeners which then will be able
// self-remove from within an anonymous functions they use as callbacks:
function nameAndSelfBind(functionToNameAndSelfBind,
name = 'namedAndBoundFunction', // optional
outerScopeReference) // optional
{
const functionAsObject = {
[name]()
{
return binder(...arguments);
}
},
namedAndBoundFunction = functionAsObject[name];
// if no arbitrary-naming functionality is required, then the constants above are
// not needed, and the following function should be just "var namedAndBoundFunction = ":
var binder = function()
{
return functionToNameAndSelfBind.bind(namedAndBoundFunction, ...arguments)();
}
// this optional functionality allows to assign the function to a outer scope variable
// if can not be done otherwise; useful for example for the ability to remove event
// listeners from the outer scope:
if (typeof outerScopeReference !== 'undefined')
{
if (outerScopeReference instanceof Array)
{
outerScopeReference.push(namedAndBoundFunction);
}
else
{
outerScopeReference = namedAndBoundFunction;
}
}
return namedAndBoundFunction;
}
// removeEventListener callback can not remove the listener if the callback is an anonymous
// function, but thanks to the nameAndSelfBind function it is now possible; this listener
// removes itself right after the first time being triggered:
document.addEventListener("visibilitychange", nameAndSelfBind(function(e)
{
e.target.removeEventListener('visibilitychange', this, false);
console.log('\nEvent listener 1 triggered:', e, '\nthis: ', this,
'\n\nremoveEventListener 1 was called; if "this" value was correct, "'
+ e.type + '"" event will not listened to any more');
}, undefined, arrayOfFormerlyAnonymousFunctions), false);
// to prove that deanonymized functions -- even when they have the same 'namedAndBoundFunction'
// name -- belong to different scopes and hence removing one does not mean removing another,
// a different event listener is added:
document.addEventListener("visibilitychange", nameAndSelfBind(function(e)
{
console.log('\nEvent listener 2 triggered:', e, '\nthis: ', this);
}, undefined, arrayOfFormerlyAnonymousFunctions), false);
// to check that arrayOfFormerlyAnonymousFunctions constant does keep a valid reference to
// formerly anonymous callback function of one of the event listeners, an attempt to remove
// it is made:
setTimeout(function(delay)
{
document.removeEventListener('visibilitychange',
arrayOfFormerlyAnonymousFunctions[arrayOfFormerlyAnonymousFunctions.length - 1],
false);
console.log('\nAfter ' + delay + 'ms, an event listener 2 was removed; if reference in '
+ 'arrayOfFormerlyAnonymousFunctions value was correct, the event will not '
+ 'be listened to any more', arrayOfFormerlyAnonymousFunctions);
}, removeEventListenerAfterDelay, removeEventListenerAfterDelay);
})();
Следующее сработало для меня достаточно хорошо. Код обрабатывает случай, когда другое событие вызывает удаление слушателя из элемента. Предварительное объявление функций не требуется.
myElem.addEventListener("click", myFunc = function() { /*do stuff*/ });
/*things happen*/
myElem.removeEventListener("click", myFunc);