Question

在JavaScript中使用addEventListener时，有三种将数据传递给侦听器的方法。哪一个是最有效的性能明智的选择？您更喜欢哪一个？

第一种方式：使用简单的侦听器

// With simple listener
const onBoardBtn = (instructionId) => {
    const onBoardBtn = document.querySelector(`.got-it-btn-${instructionId}`);
    onBoardBtn.instructionId = instructionId;
    onBoardBtn.addEventListener("click", openNextWindow);
}

const openNextWindow = (event) => {
    console.log("With Simple Listener: ", event.target.instructionId);
}

export { onBoardBtn };

这里还有另一种将参数传递给侦听器的方法吗？

第二种方式：具有匿名功能的事件监听器

const onBoardBtn = (instructionId) => {
    const onBoardBtn = document.querySelector(`.got-it-btn-${instructionId}`);
    onBoardBtn.addEventListener("click", function(){openNextWindow(instructionId)} );
}

function openNextWindow(instructionId) {
    console.log("With Anonymous function: ", instructionId);
}

export { onBoardBtn };

第三种方式：具有箭头功能的事件监听器

const onBoardBtn = (instructionId) => {
    const onBoardBtn = document.querySelector(`.got-it-btn-${instructionId}`);
    onBoardBtn.addEventListener("click", () => { openNextWindow(instructionId); } );
}

function openNextWindow(instructionId) {
    console.log("with an arrow function: ", instructionId);
}

export { onBoardBtn };

我希望进行一场精彩的辩论，以便我们所有人都能学习。

非常感谢。

addEventListener，将变量传递给侦听器的最佳方式

0 个答案: