Как передать событие следующей функции?

Question

[Анатолий]

Как передать событие event следующей функции?
В нижнем примере нужно в функции clicker2 вывести: <p id='a'>Кликни на меня, а затем на кнопку.</p>.

<p id='a'>Кликни на меня, а затем на кнопку.</p>
<input id='b' type='button' value='Вывести в консоль'>
<script>
document.getElementById('a').addEventListener('click', clicker);
function clicker(e){  
  let target = e.target;
  document.getElementById('b').addEventListener('click', clicker2(event, target));
}

function clicker2(e, target){
  console.log(target);
}
</script>

Этот пример на codepen https://codepen.io/workcode/pen/NWNdOKW

Answer 1

[kocherman]

/** Здесь мы передаём функцию clicker как параметр, не вызывая её  */
document.getElementById('A').addEventListener('click', clicker1);
// Функция clicker1() будет вызываться когда нажимаем на кнопку A
function clicker1(event1){  
  let target1 = event1.target;
  // Здесь мы вызываем функцию nonClicker(), которая возвращает функцию clicker2(), которую передаём параметром к addEventListener
  document.getElementById('B').addEventListener('click', nonClicker(event1, target1));
}
// Эта функция nonClicker() вызывается не по клику на B, но вызывается по клику на A
function nonClicker(event1,target1){
   // Функция clicker2() будет вызываться при клике на кнопку b
   return function clicker2(event2){ 
     // В этой функции доступны все три переменные
     console.log(event1,event2,target1);
   }
}

Comments

[Анатолий]

Исправил, строку получаю, но:
1) Зачем убрали event, он мне тоже нужен
2) Можете прокомментировать или дать ссылку, почему реализовано именно через return? Т.е. решение я не понял.

[kocherman]

Анатолий, Потому что

function clicker2(target){
   return function(event){   // event вот тут
     console.log(target);
   }
}

[kocherman]

Анатолий,

document.getElementById('b').addEventListener('click', clicker2(target));

Этот код выполняет clicker2(target), который в свою очередь возвращает функцию, которая идёт как второй параметр addEventListener()
Функция

function(event){ 
     console.log(target);
   }

Будет выполняться при клике, но она будет иметь доступ к переменной target, так как она объявлена в её области видимости.

[Анатолий]

kocherman, да в return получаю event. Можете дать ссылку на теорию?

[kocherman]

Анатолий, можно пробросить оба eventa, если хотите

[kocherman]

Анатолий, Нету никакой теории, это я сам придумал =)

Оба eventa можно пробросить так:

document.getElementById('a').addEventListener('click', clicker);
function clicker(event1){  
  let target1 = event1.target;
  document.getElementById('b').addEventListener('click', clicker2(event1, target1));
}
function clicker2(event1,target1){
   return function(event2){ 
     console.log(event1,event2,target1);
   }
}

[Анатолий]

kocherman, исправил пример. Теперь не работает, говорит target не определен.

function clicker(e){  
  let target = e.target;
  document.getElementById('b').addEventListener('click', clicker2);
}

function clicker2(event){  
    console.log(event.target);
    console.log(target);
}

[kocherman]

Анатолий, все правильно. откуда ему взяться.
Посмотрите еще раз на код:

/** Код полностью рабочий  */
document.getElementById('a').addEventListener('click', clicker);
function clicker(event1){  
  let target1 = event1.target;
  // Здесь мы вызываем функцию clicker2(), которая возвращает функцию, которую передаём параметром к addEventListener
  document.getElementById('b').addEventListener('click', clicker2(event1, target1));
}
// Эта функция вызывается не по клику на b, но вызывается по клику на a
function clicker2(event1,target1){
   // Функция после return будет вызываться при клике на кнопку b
   return function(event2){ 
     // В этой функции доступны все три переменные
     console.log(event1,event2,target1);
   }
}

[Анатолий]

kocherman, с return работает, только я не как не могу понять зачем он.

[kocherman]

<code lang="javascript">
/** Здесь мы передаём функцию clicker как параметр, не вызывая её  */
document.getElementById('A').addEventListener('click', clicker1);
// Функция clicker1() будет вызываться когда нажимаем на кнопку A
function clicker1(event1){  
  let target1 = event1.target;
  // Здесь мы вызываем функцию nonClicker(), которая возвращает функцию clicker2(), которую передаём параметром к addEventListener
  document.getElementById('B').addEventListener('click', nonClicker(event1, target1));
}
// Эта функция nonClicker() вызывается не по клику на B, но вызывается по клику на A
function nonClicker(event1,target1){
   // Функция clicker2() будет вызываться при клике на кнопку b
   return function clicker2(event2){ 
     // В этой функции доступны все три переменные
     console.log(event1,event2,target1);
   }
}
</code>

[kocherman]

Анатолий, с комментариями стало понятнее? Я там поменял несколько названий

[Анатолий]

kocherman, в принципе да, у меня был вопрос только по return. Соседний ответ про ()=>clicker2(target, e) полностью разъяснил ситуацию с return.

Спасибо за обучение )

Answer 2

[RAX7]

document.getElementById('b').addEventListener('click', clicker2.bind(null, target));

function clicker2(target, e){
либо

document.getElementById('b').addEventListener('click', () => clicker2(event, target));