Javascript-форум - Передача параметров в функцию обработки событий

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Передача параметров в функцию обработки событий (https://javascript.ru/forum/events/75576-peredacha-parametrov-v-funkciyu-obrabotki-sobytijj.html)

Передача параметров в функцию обработки событий

Доброго времени суток, уважаемые фронтендеры!
Возникло недопонимание с осуществлением возможности передачи параметров в событийную функцию. Ситуация изложена в примере кода. При клике по элементу, обработчик события, соответственно, вызывается в контексте этого элемента.

Есть ли способ передавать в этот обработчик значение из переменной someVar и значение свойства this.someParam?

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<button class="TestButton" data-test="TestValue">Тестовый клик</button>

<script>

class Test{

	constructor(){
		this.someParam = '123';
		this.elementsome = $('.TestButton');
		this.initEvent();
		
	}
	
	// Прикручиваем слушатель событий
	initEvent(){
		
		var someVar = 'Test'; // Как передать значение внешней переменной в контексте события клика на элементе (кнопка)
		
		this.elementsome.on('click',function( someVar ){
				
				console.log($(this).data('test')); // Получаем "TestValue" 
				
				console.log(someVar); // Сейчас сюда передается некий объект. Предполагалось, что здесь будет значение "Test" 
				
				console.log( this.someParam ); // Как получить значение этого свойства при запуске данной функции?
				
			}
		);
		
	}
	
}

new Test();

</script>

Буду примного благодарен за любую инфу!

Цитата:

Сообщение от ReadyStady

Есть ли способ передавать в этот обработчик значение из переменной someVar и значение свойства this.someParam?

Используйте стрелочную функцию!

Цитата:

Сообщение от ReadyStady

Сейчас сюда передается некий объект. Предполагалось, что здесь будет значение "Test"

Так используйте другое имя в списке аргументов!

Цитата:

Сообщение от ReadyStady

$(this).data('test')

Для того чтобы такое работало, ваш класс должен быть подклассом jQuery, но когда Джон Резиг разрабатывал свою библиотеку, он не подумал о том, что кому-то в будущем понадобится наследовать от jQuery. Есть ли надежда, что jQuery 4 будет более близка к концепциям JavaScript? Я не знаю, но знаю, что сейчас лучше использовать Web Components или React. Или заменить эту строчку $(this).data('test') на эту this.elementsome.data('test')

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<button class="TestButton" data-test="TestValue">Тестовый клик</button>
<script>

class Test{
	constructor(){
		this.someParam = '123';
		this.elementsome = $('.TestButton');
		this.initEvent();
	}

	initEvent(){
		var someVar = 'Test';
		
		this.elementsome.on('click', _ => {
				console.log(this.elementsome.data('test')); 
				console.log(someVar);
				console.log(this.someParam);
			}
		);
	}
}

new Test();

</script>

Ого! ))) Огромное спасибо за столь развёрнутый и содержательный ответ!
Всё получилось!

ReadyStady,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<button class="TestButton" data-test="TestValue">Тестовый клик</button>

<script>

class Test{

	constructor(){
		this.someParam = '123';
		this.elementsome = $('.TestButton');
		this.initEvent();

	}

	// Прикручиваем слушатель событий
	initEvent(){

		var someVar = 'Test'; // Как передать значение внешней переменной в контексте события клика на элементе (кнопка)

		this.elementsome.on('click', {someParam : this.someParam, someVar : someVar},function(event){

				console.log($(this).data('test')); // Получаем "TestValue"

				console.log(event.data.someVar); // Сейчас сюда передается некий объект. Предполагалось, что здесь будет значение "Test"

				console.log( event.data.someParam ); // Как получить значение этого свойства при запуске данной функции?

			}
		);

	}

}

new Test();

</script>

</body>
</html>

Хммм, мне определенно нужно перечитать ман по jquery - про второй аргумент с передаваемыми параметрами не слышал :-? . Отличное рабочее решение! Спасибо!!!