Question

假设我有一个带有两个参数的函数，如下所示：

function displaySum(a, b) {
    this.textContent = a + b;
}

我还有一个按钮：

<button id="my-button"></button>

我想为事件监听器创建一个sum()函数，但只传递a和b。我知道可以这样：

document.getElementById('my-button').addEventListener(sum.bind(null, 3, 7));

问题在于this会丢失。我尝试将其设置为null或undefined，希望它说忽略此内容并让其他人注入此内容，但是将this设置为{{1 }}或undefined（在严格模式下），以及null在非严格模式下。绑定后是否可以将事件目标保留为Window？

免责声明：我要求的是教育目的，而不是寻找其他方法来达到相同的结果，

Answer 1

几种方法：

首先，将目标元素作为第一个参数传递给bind()：

let el = document.getElementById('my-button');
el.addEventListener('click', sum.bind(el, 3, 7));

或

document.getElementById('my-button').addEventListener('click', evt => sum.call(evt.target, 3, 7));

第二，使用匿名函数保留范围：

document.getElementById('my-button').addEventListener('click', function() { sum.call(this, 3, 7) });

Answer 2

好吧，您始终可以使用预先声明的分配器函数来减少硬编码，因此您无需显式传递任何内容。例如：

const missingText = event => event.target.innerText = 'Missing parameters';

如果要分配动态值，也可以使用生成器模式：

const sum = (a, b) => a + b;

const setSum = (a, b) => (event) => event.target.innerText = sum(a, b);

document.querySelector('#my-button').addEventListener('click', setSum(3, 7));

如果您不熟悉生成器模式，可能看起来有些令人生畏，但在我看来，它更简洁，代码越来越可读，并且不需要绑定。

绑定事件侦听器，并以此保留元素

2 个答案: