javascript - 重新绑定(bind) JavaScript 事件并触发两次 addEventListener

Question

我有一个定义事件监听器的类方法。为了简单起见，让我们使用以下代码片段。

function bindEvents() {
    document.querySelector('button').addEventListener('click', (e) => {
        console.log('clicked!');
    }); 
}

// Initial event binding
bindEvents();

// Rebind events at some point for dynamically created elements
bindEvents();

<button type="button">Click</button>

仅使用一次 bindEvents() 时一切正常，但是例如在 ajax 回调中再次调用它会导致监听器执行两次。因此，这意味着在第二个 bindEvents() 之后，单击按钮将 console.log() 两次，依此类推。有什么办法可以避免这种行为吗？

我知道我可以在文档上“动态”绑定(bind)事件并使用 e.target 检查，但有一种情况我需要 mouseenter/ mouseleave 事件，我认为在文档中始终保留这些 eventListeners 并不是一个好主意。

我在某处读过以下内容，但它似乎是错误的......

The .addEventListener method ensures that the same function referencewon't be bound more than once to the same element/event/capturescombination.

我还使用了这里的 options 参数 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ，但没有成功。

对不起，如果这个问题在某个地方得到了回答，但我未能在 SO 和搜索引擎中找到答案。

更新:有没有办法覆盖现有的事件监听器，或者应该使用removeEventListener删除旧的事件监听器，如下面建议的kcp？有没有更优雅的解决方案来解决这个问题？

Answer 1

The .addEventListener method ensures that the same function reference won't be bound more than once to the same element/event/captures combination.

在您的情况下，每次执行 bindEvents() 时，都会将一个全新的处理程序传递给 click 事件监听器，因为您定义了新函数(无论它看起来如何)相同，它是不同的对象)。要每次使用相同的处理程序，您必须在 bindEvents 外部定义它并按名称(通过引用)传递它。这按预期工作:

function clickHandler(e){
  alert('clicked!');
}

function bindEvents() {
    document.querySelector('button').addEventListener('click', clickHandler); 
}

// Initial event binding
bindEvents();

// Rebind events at some point for dynamically created elements
bindEvents();

<button>click</button>

但是，对于 jQuery，我使用以下方法，它允许我指定仅绑定(bind)特定容器(上下文或 ctx)中的元素:

$.fn.bindEvents = function bindEvents(ctx){

	ctx = ctx || this;

	$('button', ctx).on('click', function(event){
		alert(1);
	});
};

$('body').bindEvents();

$('div').bindEvents();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Click</button>

<div><button>in div </button></div>

在上面的示例中，bindEvents 执行了两次，但第一个按钮仅绑定(bind)一次，因为它不在 div 中。而如果您单击第二个按钮，它会发出两次警报，因为满足这两个上下文。