반응형
익명 함수로 addEventListener 인 EventListener를 제거하는 방법은 무엇입니까?
function doSomethingWith(param)
{
document.body.addEventListener(
'scroll',
function()
{
document.write(param);
},
false
); // An event that I want to remove later
}
setTimeout(
function()
{
document.body.removeEventListener('scroll', HANDLER ,false);
// What HANDLER should I specify to remove the anonymous handler above?
},
3000
);
doSomethingWith('Test. ');
당신은 할 수 없습니다. 명명 된 함수를 사용하거나 어떻게 든 참조를 저장해야합니다.
var handler;
function doSomethingWith(param) {
handler = function(){
document.write(param);
};
document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
document.body.removeEventListener('scroll', handler ,false);
}, 3000);
가장 좋은 방법은 다른 처리기를 식별하고 제거 할 수 있도록 구조화 된 방식으로 수행하는 것입니다. 위의 예에서 분명히 마지막 핸들러 만 제거 할 수 있습니다.
최신 정보:
고유 한 핸들러 핸들러 (:))를 만들 수 있습니다.
var Handler = (function(){
var i = 1,
listeners = {};
return {
addListener: function(element, event, handler, capture) {
element.addEventListener(event, handler, capture);
listeners[i] = {element: element,
event: event,
handler: handler,
capture: capture};
return i++;
},
removeListener: function(id) {
if(id in listeners) {
var h = listeners[id];
h.element.removeEventListener(h.event, h.handler, h.capture);
delete listeners[id];
}
}
};
}());
그런 다음 다음과 함께 사용할 수 있습니다.
function doSomethingWith(param) {
return Handler.addListener(document.body, 'scroll', function() {
document.write(param);
}, false);
}
var handler = doSomethingWith('Test. ');
setTimeout(function() {
Handler.removeListener(handler);
}, 3000);
할 수 없습니다. 함수에 대한 참조가 필요합니다.
function doSomethingWith(param) {
var fn = function(){ document.write(param); };
document.body.addEventListener('scroll', fn, false);
setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');
다음과 같이 할 수도 있습니다.
const ownAddEventListener = (scope, type, handler, capture) => {
scope.addEventListener(type, handler, capture);
return () => {
scope.removeEventListener(type, handler, capture);
}
}
그런 다음 다음과 같이 이벤트 리스너를 제거 할 수 있습니다.
// Add event listener
const disposer = ownAddEventListener(document.body, 'scroll', () => {
// do something
}, false);
// Remove event listener
disposer();
IE를 지원할 필요가없는 경우 한 번 옵션을 사용할 수 있습니다.
[Element].addEventListener('click', () => {...}, {
capture: false,
once: true
});
반응형
'code' 카테고리의 다른 글
바닐라 ECMAScript 6 Promise 체인 취소 (0) | 2020.09.22 |
---|---|
Eclipse 작업 공간을 복제하는 방법 (0) | 2020.09.22 |
C # 출력 매개 변수에 해당하는 VB.NET이 있습니까? (0) | 2020.09.22 |
eval ()과 new Function ()은 같은 것입니까? (0) | 2020.09.22 |
PHP 경고 : PHP 시작 : 동적 라이브러리를로드 할 수 없습니다. (0) | 2020.09.22 |