This question has already been answered:

I was faced with this situation and for educational purposes it is interesting to understand how this works.

I assigned this.button.addEventListener variable addHandler and calling addHandler several times led to the fact that when I click on any place in the document, the events that I have hung up with this construct are triggered.

Why it works that way, I can not understand. Tell me.

 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>

Reported as a duplicate at Grundy. javascript Apr 26 '18 at 1:20 pm

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • The question did not mean at all that it was somehow related to the context of the call. Why is it always if the question somehow IN TOTAL turns out to be connected with the context of the call, try to mark it as a duplicate? - Igor
  • I thought that I was assigning the method of this particular object, but in the end it turned out that I had assigned a variable to a method that is not tied to a specific object. The answer is that I assign a universal method, and not a method of a specific object. As a result, this is solved with the help of the context, but initially the question is not about how not to lose the context - Igor
  • But the answer is about that :). The method is still tied to a specific object. Only special object - window . - Igor

1 answer 1

Because the challenge

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

causes the addHandler / addEventListener function to addEventListener in a global context. That is, Button2.init a click handler on the entire document - three times in your example. And they are all executed on a click anywhere on the window.

Compare:

  init() { let addHandler = this.button.addEventListener.bind(this.button); addHandler('click', () => { ...
  • For sure! Thank you very much! - Igor