Question

我想从一个元素中删除一个事件监听器，但是它的功能必须带有一个参数，而且似乎不起作用。我试图在互联网上找到解决方案，但似乎有人和我有同样的问题。

该功能的作用是简单地更改元素的可见性

立即删除侦听器没有多大意义，但这仅用于示例。

function createHoverEqElts() {
	slotElts.forEach(function(slot, i) {
		if(existValueElts[i].value == "true") {
			let infoElt = document.createElement('div');
			infoElt.style.position = "relative";
			infoElt.style.bottom = "71px";

			slot.appendChild(infoElt);
			slotListenersElts.push(infoElt);

			slot.addEventListener('mouseover', _slotListener(infoElt));
			slot.removeEventListener('mouseover', _slotListener(infoElt));
			slot.addEventListener('mouseout', function() {
				infoElt.style.visibility = "hidden";
			});
		}
	});
}

let _slotListener = function(elt) {
	return function() {
		elt.style.visibility = "visible";
	}
}

Answer 1

我认为您的问题是由于某种原因您返回了一个函数。您应该传递一个执行某些操作的函数。试试这个。

let _slotListener = function(elt) {
  elt.style.visibility = "visible";
}

然后执行此操作。在这种情况下，您也可以通过传递null代替它，尝试任何一个。

slot.addEventListener('mouseover', _slotListener.bind(this, infoElt));

Answer 2

由于您的函数返回匿名函数，因此您将丢失其引用。 removeEventListener需要发生相同的情况才能正常工作。

换句话说，_slotListener(infoElt) == _slotListener(infoElt)将始终返回false，因此removeEventListener('event', _slotListener(infoElt))将永远无法工作。

将_slotListener()返回的函数存储在某个位置，然后将其用于删除事件。在您的示例中，它可以在变量中。在一个更复杂的示例中，它可能位于具有某种引用的对象中，或者位于DOM元素中的属性中。

var callback = _slotListener(infoElt); // save reference
slot.addEventListener('mouseover', callback);
slot.removeEventListener('mouseover', callback);

Answer 3

之所以不能有效地删除事件侦听器，是因为传递给addEventListener的函数与传递给removeEventListener的函数不同。 JavaScript无法比较两个具有完全相同内容的函数，并说出它们是同一函数。每次调用_slotlistener时，它都会创建一个 new 函数，该函数与_slotlistener先前返回的函数不同。相反，执行此操作的正确方法是将_slotlistener的结果分配给变量，然后将该变量传递到addEventListener和removeEventListener中。例如，

var myListenerFunc = _slotListener(elt);
slot.addEventListener("mouseover", myListenerFunc);
slot.removeEventListener("mouseover", myListenerFunc);

从具有参数的元素中删除事件侦听器

3 个答案: