了解EventListeners中匿名函数的变量作用域

Question

在下面的例子中，它是绿色方块我对……很感兴趣。

点击红色Square返回上一级设置的变量的值。

点击蓝色Square返回参数的默认值。

点击橙色square只是返回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>