Когда можно применять функцию addEventListener?

Question

[Alex_87]

Здравствуйте! Прошу помочь в следующем вопросе... Есть код:

window.onload = function () {
    
    new our({
        images: '.gallery-1 img',
        btnPrev: '.gallery-1 .buttons .prev',
        btnNext: '.gallery-1 .buttons .next',
        auto: false
    });
    
	new our({
        images: '.gallery-2 img',
        btnPrev: '.gallery-2 .buttons .prev',
        btnNext: '.gallery-2 .buttons .next',
        auto: true,
        rate: 2000
    });
}


function our(obj) {
    this.images = document.querySelectorAll(obj.images);
		
	this.auto = obj.auto;
		
	this.btnPrev = obj.btnPrev;
	this.btnNext = obj.btnNext;
    
    this.rate = obj.rate || 1000;
	
	var i = 0;
    
    var slider = this; /* Slider равен текущему объекту (this)*/

	this.prev = function () {
		slider.images[i].classList.remove('showed');
		i--;

		if (i < 0) {
			i = slider.images.length - 1;
		}

		slider.images[i].classList.add('showed');
	}

	this.next = function () {
		slider.images[i].classList.remove('showed');
		i++;

		if (i >= slider.images.length) {
			i = 0;
		}

		slider.images[i].classList.add('showed');
	}
	
    document.querySelector(slider.btnPrev).onclick = slider.prev;
    document.querySelector(slider.btnNext).onclick = slider.next;
    /*this.btnNext.addEventListener('click', slider.next);*/
    
		
	if(slider.auto)	{
        setInterval (function() {
            slider.next();
        }, 1000);}  
}
Я не могу понять, почему вместо записи:<code lang="javascript">
<code lang="javascript">
document.querySelector(slider.btnNext).onclick = slider.next;
</code>
Не могу применить эту запись:
<code lang="javascript">
    slider.btnNext.addEventListener('click', slider.next);
</code>
Когда можно применять addEventListener?

Answer 1

[Андрей Буров]

slider.btnNext - это строка '.gallery-2 .buttons .next'
можете сделать

document.querySelector(slider.btnNext).addEventListener('click', slider.next);

Answer 2

[Stalker_RED]

Проблема не в addEventListener, а в том, что document.querySelector(slider.btnNext) - это DOM-элемент а slider.btnNext это строка.

Можно заменить this.btnNext = obj.btnNext; на

this.btnNext = document.querySelector(obj.btnNext);

, но это все равно не финальный вариант, т.к. если на странице будет больше одного слайдера будут подключаться кнопки только от первого.

И на будущее: вы сильно облегчите задачу если при таких вопросах будете открывать консоль и копировать оттуда сообщение об ошибке.