时间戳

首页 > 解决方案 > 使用绑定将参数传递给事件监听器中的命名函数

javascript - 使用绑定将参数传递给事件监听器中的命名函数

问题描述

之前在侦听器中的命名函数上发布过，但随着我理解的更多，它很快改变了焦点，所以我想我会发布一些现在更好地反映这个问题的东西。

我正在尝试做的事情：

所以第 1 点和第 3 点需要我在事件侦听器中使用命名函数，这样我可以在移除侦听器时引用同一个对象。

对于第 2 点，为了传递额外的参数，我正在使用bind. 因为它改变了回调的方法签名（？），所以我将它存储在一个单独的变量focusInHandler中。这有效，并且在调用时删除了侦听器。

但是要解决我的主要问题：当前传递额外的参数不起作用。我知道 to 的第一个参数clearText是event对象，并且 (afaik)e.currentTarget等价于this，并且e.target是事件起源的元素，

但我怎样才能访问其他参数？

// index.js

adminView.addFocusInListeners(arrayOfElements, adminView.clearText);

// adminView.js

let focusInHandler;

export const addFocusInListeners = (items, cb) => {
    items.forEach(item => {
        focusInHandler = cb.bind(item, 'extra argument');
        item.addEventListener('focusin', cb);
    });
};
export const removeFocusInListeners = (items, cb) => {
    items.forEach(item => {
        focusInHandler = cb;
        item.removeEventListener('focusin', cb);
    });
}


export const clearText = (e, text) => {

    // e.currentTarget === this
    console.log(e.currentTarget);

    // e.target === the element clicked
    console.log(e.target);

    // undefined?
    console.log(text);
    console.log(this);
};

我可能遗漏了一些非常简单的东西，但这与我所能得到的一样接近:(

谢谢！

标签： javascript

解决方案

.bind() 返回一个新函数，其中this是您的第一个参数。所以你必须添加focusInHandler为你的事件监听器。

关于删除和添加，您可以继续将事件处理程序推送到数组并使用 forEach 和正确的索引来删除：

forEach((element, index) => { ... } )

推荐阅读