主页 / 问题 / 819727
Accepted
Igor
Asked:2020-04-26 20:36:39 +0000 UTC2020-04-26 20:36:39 +0000 UTC

将 addEventListener 分配给变量。帮助弄清楚发生了什么[重复]

  • 772

我遇到了这种情况，出于教育目的，了解它的工作原理很有趣。

我将它分配给this.button.addEventListener一个变量，并且多次addHandler调用导致当您单击文档中的任何位置时，都会触发事件，我在此设计的帮助下挂断了。addHandler

为什么它会以这种方式工作，我无法理解。告诉。

class Button1 {
  constructor(button, value) {
    this.button = button;
    this.value = value;

    this.init();
  }

  init() {
    this.button.addEventListener('click', () => {
      console.log(this.value)
    })
  }
}

class Button2 {
  constructor(button, value) {
    this.button = button;
    this.value = value;

    this.init();
  }

  init() {
    let addHandler = this.button.addEventListener;
    addHandler('click', () => {
      console.log(this.value)
    })
  }
}

let button1 = document.getElementById('button_1');
let button2 = document.getElementById('button_2');
let button3 = document.getElementById('button_3');
let button4 = document.getElementById('button_4');
let button5 = document.getElementById('button_5');
let button6 = document.getElementById('button_6');

let newButton1 = new Button1(button1, 'п');
let newButton2 = new Button1(button2, 'а');
let newButton3 = new Button1(button3, 'в');
let newButton4 = new Button2(button4, 1);
let newButton5 = new Button2(button5, 2);
let newButton6 = new Button2(button6, 3);
<p>Я думал сработает только событие кнопки, но срабатывает событие кнопки + события трех следующих кнопок. К тому же события трех кнопок срабатывае при клике на любом месте документа</p>
<button id='button_1'>п</button>
<button id='button_2'>а</button>
<button id='button_3'>в</button>
<p>При нажатии на одну, сработает функция всех</p>
<button id='button_4'>1'</button>
<button id='button_5'>2'</button>
<button id='button_6'>3'</button>

javascript

1 个回答

  1. Best Answer

    因为挑战

    addHandler('click', () => { ...

    导致函数addHandler/addEventListener在全局上下文中执行。也就是说，它会Button2.init在整个文档上挂起一个单击处理程序 - 在您的示例中是三次。它们都是在单击窗口中的任意位置时执行的。

    相比：

      init() {
    let addHandler = this.button.addEventListener.bind(this.button);
    addHandler('click', () => { ...
    • 1

相关问题