Почему присвоение переменной происходит раньше времени?

Question

[dron112]

Я объявил флаг isOpenInputForSearch в положении fasle
После я делаю клик по элементу node, вызывается функция которая
- выводит в консоль isOpenInputForSearch ( он остаётся в положении fasle)
- на документ я вещаю addEventListener, в котором также делаю console.log(isOpenInputForSearch ),
но тут уже isOpenInputForSearch находиться в положении true, хотя в положение true я ставлю его ниже

Почему так происходит ?

let isOpenInputForSearch =  false

node.addEventListener('click', function(e) {

    console.log('1',  isOpenInputForSearch) // false - всё логично

     document.addEventListener('click', () => {
           console.log('2',  isOpenInputForSearch)  // true - почему ?
    });

    isOpenInputForSearch = true  // ведь меняю на true только тут
})

Comments

[Михаил]

потому что добавления события никак не влияет на дальнейший код

[dron112]

Михаил, добавление события происходит асинхронно ? Почему ?

[Михаил]

dron112, птому что так устроено api браузера

[WapSter]

dron112, на то они и события, неизвестно когда они наступят

Answer 1

[0xD34F]

Никакого "раньше времени", как написали, так и происходит:

1. Добавили обработчик на document
   
2. Изменили значение переменной
   
3. Событие клика, случившееся на node, всплывает, попадает в свежедобавленный обработчик из п. 1, значение переменной уже новое, потому что п. 2
   

Если хотите иметь доступ к значению, которое было на момент назначения обработчика, привяжите его к обработчику с помощью bind:

document.addEventListener('click', ((val, e) => {
  console.log(val);
}).bind(null, isOpenInputForSearch));