代码之家 › 专栏 › 技术社区 › Rounin

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

anonymous-function addeventlistener scope parameters javascript

Rounin · 技术社区 · 3 年前

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

我点击红色平方返回设置在较高位置的变量的值。

我点击蓝色 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>

3 回复 | 直到 3 年前

Jose Aviles 3 年前

您得到了“undefined”,因为回调函数需要一个您没有传递的“square3”参数。

基本上,您在上面定义的平方3与在函数范围内定义的平方不同

回调函数仅传递事件对象

您可以查看类似变量定义的函数参数,这些值是在我们调用函数时定义的

Spectric amamoto 3 年前

为什么值返回为 undefined ?

您的回调接受2个参数, e 和 square3 这个 平方3 参数替代 平方3 回调范围中的全局变量。自从 addEventListener 只将一个参数(事件)传递给回调,第二个参数为 未定义 .

要解决此问题,只需将其从参数列表中删除即可。所以,使用 (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>

Rounin 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>