了解 EventListeners 中匿名函数的可变范围

Question

在下面的示例中，它是我感兴趣的绿色方块。

我知道点击红色方块会返回设置更高的变量的值。

我知道点击蓝色方块会返回参数的默认值。

我知道点击橙色方块只会返回event对象。

但是为什么点击绿色方块并没有传递上层变量设置的值呢？

为什么返回的值是undefined ？

是否可以将值从设置更高的变量传递到EventListener方法中的匿名函数？ 或者这根本不可能？

例子：

 const square1 = 'red'; const square2 = 'orange'; const square3 = 'green'; const square4 = 'blue'; document.querySelector('.square.one').addEventListener('click', () => console.log(square1)); document.querySelector('.square.two').addEventListener('click', (square2) => console.log(square2)); document.querySelector('.square.three').addEventListener('click', (e, square3) => console.log(square3)); document.querySelector('.square.four').addEventListener('click', (e, square4 = 'blue') => console.log(square4));

 .square { float: left; width: 100px; height: 100px; margin-right: 12px; line-height: 100px; text-align: center; color: rgb(255, 255, 255); font-family: sans-serif; cursor: pointer; }.square.one { background-color: rgb(255, 0, 0); }.square.two { font-size: 14px; line-height: 40px; background-color: rgb(255, 127, 0); }.square.three { background-color: rgb(0, 127, 0); }.square.four { background-color: rgb(0, 0, 255); }

 <div class="square one">Click Me</div> <div class="square two">Probably don't click me</div> <div class="square three">Click Me</div> <div class="square four">Click Me</div>

Answer 1

你得到'undefined'是因为回调函数需要一个你没有传递的'square3'参数。

基本上，您在上面定义的 square3 与函数范围内定义的不同

回调函数只是传递事件对象

可以像变量定义一样查看函数参数，我们调用函数时定义了哪些值

Answer 2

为什么返回的值是undefined ？

您的回调接受 2 个参数， e和square3 。 square3参数覆盖回调范围内的square3全局变量。 由于addEventListener只将一个参数（事件）传递给回调，因此第二个参数是undefined 。

要解决此问题，只需将其从参数列表中删除即可。 所以，使用(e) => //...而不是(e, square3) => //...

 const square1 = 'red'; const square2 = 'orange'; const square3 = 'green'; const square4 = 'blue'; document.querySelector('.square.one').addEventListener('click', () => console.log(square1)); document.querySelector('.square.two').addEventListener('click', (square2) => console.log(square2)); document.querySelector('.square.three').addEventListener('click', (e) => console.log(square3)); document.querySelector('.square.four').addEventListener('click', (e, square4 = 'blue') => console.log(square4));

 .square { float: left; width: 100px; height: 100px; margin-right: 12px; line-height: 100px; text-align: center; color: rgb(255, 255, 255); font-family: sans-serif; cursor: pointer; }.square.one { background-color: rgb(255, 0, 0); }.square.two { font-size: 14px; line-height: 40px; background-color: rgb(255, 127, 0); }.square.three { background-color: rgb(0, 127, 0); }.square.four { background-color: rgb(0, 0, 255); }

 <div class="square one">Click Me</div> <div class="square two">Probably don't click me</div> <div class="square three">Click Me</div> <div class="square four">Click Me</div>

Answer 3

是否可以将值从设置更高的变量传递到 EventListener 方法中的匿名函数？ 或者这根本不可能？

它可能并不经常需要，但为了清楚起见，有时可能希望在EventListener的匿名函数中显式包含一个具有明确声明值的参数。

在提出问题和尝试各种方法的过程中，我意识到这是可能的，但您需要通过参数默认值引用已声明的变量。

例如

document.querySelector('.square.three').addEventListener('click', (e, mySquare3 = square3) => console.log(mySquare3));

---

工作示例：

 const square1 = 'red'; const square2 = 'orange'; const square3 = 'green'; const square4 = 'blue'; document.querySelector('.square.one').addEventListener('click', () => console.log(square1)); document.querySelector('.square.two').addEventListener('click', (square2) => console.log(square2)); document.querySelector('.square.three').addEventListener('click', (e, mySquare3 = square3) => console.log(mySquare3)); document.querySelector('.square.four').addEventListener('click', (e, square4 = 'blue') => console.log(square4));

 .square { float: left; width: 100px; height: 100px; margin-right: 12px; line-height: 100px; text-align: center; color: rgb(255, 255, 255); font-family: sans-serif; cursor: pointer; }.square.one { background-color: rgb(255, 0, 0); }.square.two { font-size: 14px; line-height: 40px; background-color: rgb(255, 127, 0); opacity: 0.5; pointer-events: none; }.square.three { background-color: rgb(0, 127, 0); }.square.four { background-color: rgb(0, 0, 255); }

 <div class="square one">Click Me</div> <div class="square two">I've been disabled</div> <div class="square three">Click Me</div> <div class="square four">Click Me</div>