Привязать слушателя события и сохранить элемент как это

Question

Допустим, у меня есть функция, принимающая два аргумента, например:

function displaySum(a, b) {
    this.textContent = a + b;
}

У меня также есть кнопка:

<button id="my-button"></button>

Я хотел бы сделать функцию sum()мой слушатель событий, но передает исключительно a и b.Я знаю, что это можно сделать так:

document.getElementById('my-button').addEventListener(sum.bind(null, 3, 7));

Проблема в том, что this потеряно таким образом.Я попытался установить его на null или undefined и надеюсь, что в нем будет указано , игнорируйте это и позволяйте другим вводить их в этот , но вместо этого он устанавливает this в undefined или null в строгом режиме.и Window в нестрогом режиме.Можно ли сохранить цель события как this после привязки?

Отказ от ответственности: Я прошу в образовательных целях, а не ищу другие способы достижения того же результата, как я их знаю.

Answer 1

Пара подходов к этому:

Сначала передайте целевой элемент в качестве первого аргумента bind():

let el = document.getElementById('my-button');
el.addEventListener('click', sum.bind(el, 3, 7));

или

document.getElementById('my-button').addEventListener('click', evt => sum.call(evt.target, 3, 7));

Во-вторых, используйте анонимную функцию, чтобы сохранить область действия:

document.getElementById('my-button').addEventListener('click', function() { sum.call(this, 3, 7) });

Answer 2

Ну, вы всегда можете использовать функцию-назначитель, объявленную заранее, чтобы уменьшить жесткое кодирование, таким образом, вам не нужно ничего явно передавать.Например:

const missingText = event => event.target.innerText = 'Missing parameters';

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

const sum = (a, b) => a + b;

const setSum = (a, b) => (event) => event.target.innerText = sum(a, b);

document.querySelector('#my-button').addEventListener('click', setSum(3, 7));

Может показаться немного пугающим, если вы не знакомы сшаблон генератора, но, на мой взгляд, он намного чище, меньше и более читаемый код, и привязка не требуется.