Олег, вот опять ты пытаешься получить магию и считаешь, что компьютер тебя неправильно понимает. Я тебе уже говорил об этом: компьютер тебя понимает ровно на столько, на сколько ты изъяснился с ним. А изъясниться с ним ты пока что можешь только кодом. Вот и надо код смотреть, а не твои желания. Точнее при написании кода ты, конечно же, должен учитывать свои желания, но конечный результат надо смотреть по написанному коду, и если что-то работает не так, как ты хотел, то скорее всего ты код неправильно написал, а не компьютер тебя не так понял.
> Я же из документа выбираю конкретный селектор, при чем здесь весь документ?
Это две, совершенно не связанные друг с другом операции.
// Здесь ты выполняешь поиск ноды в документе и присваиваешь ее переменной $btn
// (точнее в переменную записывается ссылка на найденный в DOM элемент)
var $btn = document.querySelector('elem-btn elem-btn--red to-basket ng-scope')
// Здесь ты навешиваешь на документ обработчик, срабатывающий на клик по документу
document.addEventListener('click', function(e) {
// Этот обработчик срабатывает по клику и выводит ранее созданную переменную
console.log($btn)
})
Этот код можно написать вот так, чтобы было понятней.
// Здесь ты выполняешь поиск ноды в документе и присваиваешь ее переменной $btn
// (точнее в переменную записывается ссылка на найденный в DOM элемент)
var $btn = document.querySelector('elem-btn elem-btn--red to-basket ng-scope')
// Создаем функцию-обработчик
var handler = function(e) {
// Этот обработчик срабатывает по клику и выводит ранее созданную переменную
console.log($btn)
}
// Здесь ты навешиваешь на документ обработчик, срабатывающий на клик по документу
document.addEventListener('click', handler)
Как видишь, handler как бы и не имеет отношения к document. Просто документу прописывается "При клике вызови handler".
Соответственно, если ты хочешь, чтобы обработчик срабатывал именно по кнопке, то и событие надо навешивать на кнопку.
// Создаем функцию-обработчик
var handler = function(e) {
// Выводим ноду из объекта события
console.log(e.target)
}
// Здесь ты навешиваешь на документ обработчик, срабатывающий на клик по документу
document.querySelector('elem-btn elem-btn--red to-basket ng-scope').addEventListener('click', handler)
>> В данном случае не нужны все кнопки, нужна конкретно одна кнопка.
Вот в данном случае и будет одна кнопка. Но только одна и самая первая. Не думаю, что ты хотел именно этого. Скорее всего ты хотел обрабатывать клики по любой кнопке, просто знать на какой именно клик сработал. И именно поэтому я и говорил использовать цикл, а в нем навесить по ивенту на каждую кнопку. Пример
// Создаем функцию-обработчик
var handler = function(e) {
// Выводим ноду из объекта события
console.log(e.target)
}
// Здесь ты навешиваешь на документ обработчик, срабатывающий на клик по документу
document.querySelectorAll('elem-btn elem-btn--red to-basket ng-scope').forEach(node => {
node.addEventListener('click', handler)
})
Вот здесь на каждую кнопку будет навешен один и тот же хендлер и срабатывать он будет на каждой кнопке в отдельности. А в самом хендлере из объекта события ты вытащишь инстанс конкретной ноды (e.target), и из нее уже можешь получить все нужные тебе данные.