Значение this при событии input?

Question

[IvanIvanOvcharenko]

Добрый день! Есть вопрос касательно значение this , при навешивании обработчика событий на элементы. Если я вешаю событие click на какой либо элемент и вывожу значение this в консоли - выводится элемент по которому был клик.

let div = document.querySelector('div');
        div.addEventListener('click', () => {
            console.log(this)
        })

Если я вешаю событие input , на элементы input - значение this это глобальный объект window.

let inputs = document.querySelectorAll('.step input');
        inputs.forEach(element => {
            element.addEventListener('input', () => {
                console.log(this)
            })
        })

Столкнулся с данной проблемой, при решении одной задачи. На лендинге есть несколько одинаковых форм, нужно что бы при заполнении инпута на одной форме, заполнялись аналогичные инпуты на остальных формах. Задачу выполнил, хотя изначально думал что буду получать значение input через this.value

Answer 1

[Сергей delphinpro]

https://habr.com/ru/company/ruvds/blog/419371/
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://tproger.ru/translations/javascript-this-ke...
https://yandex.ru/search/?text=this%20в%20javascript

Вы лучше проясните эту тему для себя что называется от и до. Один из важнейших аспектов языка. Знать и понимать надо.

Comments

[IvanIvanOvcharenko]

Сейчас почитаю, спасибо

[IvanIvanOvcharenko]

Все прояснилось

Answer 2

[Артур Арутюнян]

Я вообще не понимаю что за бред Вы написали и какую цель преследуете, во первых почему не юзаете JQuery?
В чем принципиально писать на чистом JS?
Во-вторых напишите ясно чего вы хотите от инпутов?
И наконец в третьих, стрелочные функции не имеют своего контекста, если стрелочная функция не вызвана как метод определенного объекта, то контекстом для стрелочной функции будет window.
чтобы ваша программа заработала нужно убрать стрелочные функции, по моему Вы не понимаете что делаете в принципе и лепите все подряд не зная языка, пользуйтесь JQuery, и учите JS)))))

<div></div>
	<div class="step"><input type="text" class="input_1"></div>
	<div></div>
	<div class="step"><input type="text" class="input_2"></div>
	<div></div>
 	<div class="step"><input type="text" class="input_3"></div>
 	<style>
 		div {
 			width: 100px;
  			height: 50px;
  			background-color: purple;
  			margin: 5px;
 		}
  
		.step {
			background-color: green;
  			margin: 15px 5px;
  			display: flex;
		}
 	</style>
 	<script type="text/javascript">
 		document.querySelector('div').addEventListener('click', function() {
            console.log(this)
        })
 		function setInputsValue(inputs, value) {
 			inputs.forEach(input => {
            	input.value = value;
            })
 		}

		let inputs = document.querySelectorAll('.step input');
        inputs.forEach(input => {
            input.addEventListener('input', function() {
                console.log(this)
                setInputsValue(inputs, this.value)
            })
        })
 	</script>

Если при изменении одного инпута менять остальные, то примерно так без JQuery делается

Comments

[IvanIvanOvcharenko]

Я не понимаю заданного Вами тона. Если не нравится мой вопрос, он кажется Вам бредом - пройдите мимо и не отвечайте. Спасибо , кэп ,за совет учить js, этим и занимаюсь ;)

[G F]

Потому что jquery это 1.3 мб мусора)

[Артур Арутюнян]

IvanIvanOvcharenko, не хотел оскорбить Ваше достоинство милорд, да и не оскорблял, написал по факту, сам был таким же.
Мой ответ решает Вашу проблему, поэтому прошу подобрать сопельки и отметить его ответом на вопрос дружище))))
Мы на одной стороне, и я буду рад тебе помочь в любой непонятной ситуации.
И реально советую использовать JQuery, это далеко не зашквар и не тормозит код для обычных сайтов, я бы сказал даже ускоряет твою работу и читаемость кода.
Надеюсь без обид, задавай вопросы))

[Артур Арутюнян]

G F, Дружище ты пишешь сайт для яндекса? или что? Пожалуйста не советуй человеку личные неаргументированные доводы. Когда-то я думал как ты, но потом чем глубже я изучал задачи и чем сложнее они были, тем больше фреймов и syntactic sugar мы использовали. Удачи в работе)))

[G F]

Артур Арутюнян, спасибо тебе тоже. Выбирайся из 2007 где jquery был актуален.