Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.10.2018, 17:30
Новичок на форуме
Отправить личное сообщение для ReadyStady Посмотреть профиль Найти все сообщения от ReadyStady
 
Регистрация: 21.10.2018
Сообщений: 3

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

Есть ли способ передавать в этот обработчик значение из переменной 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, 21.10.2018 в 17:34.
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2018, 18:06
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2018, 18:40
Новичок на форуме
Отправить личное сообщение для ReadyStady Посмотреть профиль Найти все сообщения от ReadyStady
 
Регистрация: 21.10.2018
Сообщений: 3

Ого! ))) Огромное спасибо за столь развёрнутый и содержательный ответ!
Всё получилось!
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2018, 18:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2018, 19:20
Новичок на форуме
Отправить личное сообщение для ReadyStady Посмотреть профиль Найти все сообщения от ReadyStady
 
Регистрация: 21.10.2018
Сообщений: 3

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий по клику у нескольких кнопок и передача в функцию finlolo Events/DOM/Window 3 12.08.2018 20:28
передача параметров в функцию TomTykver jQuery 2 27.02.2016 12:28
Передача параметров в функцию rusel_z Общие вопросы Javascript 6 23.03.2015 18:51
Передача параметров сценарию обработки стореджа на сервере Allan Stark ExtJS 4 03.10.2012 14:46
Передача параметров с сервера в функцию mikel Events/DOM/Window 2 29.08.2011 21:18