Как передать параметры в событие js не изменяя контекст?

Question

[Сергей Хлопов]

Здравствуйте подскажите пожалуйста, у меня есть метод класса addEventOpenModal он собственно устанавливает событие click на кнопку. В самом обработчике события мне нужен this этого события, т.к. в нём находиться кнопка по которой пользователь нажал, но так же мне внутри обработчика нужен и объект класс которому этот метод принадлежит. Проблема в том что этот обработчик который я установил мне нужно удалять, следовательно код ниже с анонимной функцией я оставить не могу, потому что я тогда не смогу удалить обработчик. Я пробовал через bindпередать параметры в событие, но он меняет контекст, я теряю this самого события. Подскажите пожалуйста можно ли вообще оставить this события, и ещё добавить своими дополнительные параметры ?
Сейчас мой метод выглядит вот так:

addEventOpenModal()
	{
		let btnArray = document.querySelectorAll(this.btnOpenModal);
		let objectCurrent = this; //Получаю объект класса вот тут для использования в обработчике
		btnArray.forEach((element) => {
			element.addEventListener('click',function(e) {
				objectCurrent.itemRemove = this.closest('.list-object__item');
				let idRemove = this.getAttribute('data-id');
				let name = this.getAttribute('data-title');
				let entity = window.switchObjects.getActionEntity();
				let modal = document.querySelector('[data-remove-modal]');
				objectCurrent.idRemove = idRemove;
				objectCurrent.entity = entity;
				let modalOverlay = modal.querySelector('.modal__overlay');
				let modalBody = modal.querySelector('.modal__body');
				let modalTitle = modal.querySelector('.modal__title-dynamic');
				modalTitle.innerHTML = name;
				objectCurrent.modalElem = new objectCurrent.modal(modalBody, modalOverlay, window.animation);

				objectCurrent.modalElem.showModal();

				objectCurrent.formRemove = document.querySelector('.modal__form-remove');

				objectCurrent.formRemove.addEventListener('submit',objectCurrent.submitEvent);
			});
		});
	}

Заранее благодарю за ответ

Answer 1

[Сергей Хлопов]

Решил собственно свою проблему тем что добавил объект класса который мне нужен в глобальный объект window а потом в методе где этот объект класса мне необходим я к нему получаю доступ через window.
В итоге получился такой вот код:
Это я добавляю в window
объект который мне нужен:

addEventOpenModal()
	{
		let btnArray = document.querySelectorAll(this.btnOpenModal);
		window.objectCurrent = this;
		btnArray.forEach((element) => {
			element.addEventListener('click',this.eventOpenModal);
		});
	}

А тут уже получаю доступ через window к объекту который мне нужен

eventOpenModal(e)
	{
		window.objectCurrent.itemRemove = this.closest('.list-object__item');
		let idRemove = this.getAttribute('data-id');
		let name = this.getAttribute('data-title');
		let entity = window.switchObjects.getActionEntity();
		let modal = document.querySelector('[data-remove-modal]');
		window.objectCurrent.idRemove = idRemove;
		window.objectCurrent.entity = entity;
		let modalOverlay = modal.querySelector('.modal__overlay');
		let modalBody = modal.querySelector('.modal__body');
		let modalTitle = modal.querySelector('.modal__title-dynamic');
		modalTitle.innerHTML = name;
		window.objectCurrent.modalElem = new window.objectCurrent.modal(modalBody, modalOverlay, window.animation);

		window.objectCurrent.modalElem.showModal();

		window.objectCurrent.formRemove = document.querySelector('.modal__form-remove');

		window.objectCurrent.formRemove.addEventListener('submit',window.objectCurrent.submitEvent);
	}

Возможно есть решение конечно более лучше и надежней.

Answer 2

[hzzzzl]

выглядит как-то слишком запутанно :)

ноооо что если

let objectCurrent = this; //Получаю объект класса вот тут для использования в обработчике
    btnArray.forEach((element) => {
      element.addEventListener('click',function(e) {
        objectCurrent.itemRemove = this.closest('.list-object__item');

если вот это переписать как

btnArray.forEach((element) => {
      element.addEventListener('click', (e) => {
        // и здесь кликнутый элемент будет доступен как e.target
        // а внешний this будет сохранен в objectCurrent 
        objectCurrent.itemRemove = <b>e.target</b>.closest('.list-object__item');
        let idRemove = <b> e.target</b>.getAttribute('data-id');
        let name =  <b>e.target</b>.getAttribute('data-title');

UPD ага, в коде нельзя выделять болдом, но понятно что я имел в виду

Comments

[Сергей Хлопов]

Благодарю за ответ

[Алексей Ярков]

Сергей Хлопов, если ответ Вам помог, то отметьте его, пожалуйста, решением.

[Сергей Хлопов]

Алексей Ярков, готово, отметил свой ответ решением, немного по другому сделал просто