Как вызвать событие click на чистом JS?

[kairos]

Вопрос к знатокам JS. Пытаюсь вызвать событие клика на кнопку.
Однако событие не происходит. Решил проверить правильно ли отобрал кнопку на странице для дальнейшей работы с ней
В итоге вот такой код:

 

var previousButton = document.querySelector('button.previous');  
console.log(previousButton);

 
Выдает в консоль буквально следующее:

<button class="flickity-prev-next-button-222 previous" type="button" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button>

 

И я вот тут что-то запутался. Он мне что вернул? Объект или строку с кодом? Если объект то подходит ли он для вызова события клика на него?

При этом в документации указанно что метод document.querySelector() - возвращает ссылку на объект типа Element линк:
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector

Но почему тогда я вижу в консоли строку с исходным кодом?

Змінено 8 червня 2021 користувачем kairos

[ArtemPitov]

document.addEventListener('DOMContentLoaded', function() {
	document.qerySelector('.flickity-prev-next-button').addEventListener('click', function (e) {
		console.log(e)
	});
})

 

[FastOptimizer]

31 минуту назад, kairos сказал:

Вопрос к знатокам JS. Пытаюсь вызвать событие клика на кнопку.
Однако событие не происходит. Решил проверить правильно ли отобрал кнопку на странице для дальнейшей работы с ней
В итоге вот такой код:

 

var previousButton = document.querySelector('button.previous');  
console.log(previousButton);

 
Выдает в консоль буквально следующее:

<button class="flickity-prev-next-button-222 previous" type="button" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button>

 

И я вот тут что-то запутался. Он мне что вернул? Объект или строку с кодом? Если объект то подходит ли он для вызова события клика на него?

При этом в документации указанно что метод document.querySelector() - возвращает ссылку на объект типа Element линк:
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector

Но почему тогда я вижу в консоли строку с исходным кодом?

и забудьте про var - используйте let и const

[kairos]

33 minutes ago, ArtemPitov said:

document.addEventListener('DOMContentLoaded', function() {
	document.qerySelector('.flickity-prev-next-button').addEventListener('click', function (e) {
		console.log(e)
	});
})

 

Странно, выдает ошибку:

 

(index):1080 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at (index):1080

(index):1067 Uncaught TypeError: document.qerySelector is not a function
    at HTMLDocument.<anonymous> ((index):1067)

Кроме того как я понимаю это код чтобы отследить событие клика? А мне нужно его вызвать, то есть с имитировать событие как будто пользователь кликнул на кнопку.

Змінено 8 червня 2021 користувачем kairos

[kairos]

В общем получается что для такого кода:

document.addEventListener('DOMContentLoaded', function() {
    console.log('test DOMContentLoaded!!!');
    document.qerySelector('#section-slideshow > .Slideshow > .Slideshow__Carousel > button.next').addEventListener('click', function (e) {
      console.log('test click!!!');
      console.log(e);
      });
  });

Первое сообщение: "test DOMContentLoaded!!!" - выводится, а при клике не кнопку второе: "test click!!!" - уже нет. Ну то есть событие клика этот код не отслеживает. Но повторюсь мне нужно не отследить событие клика, а именно вызвать его. Задача усложняется тем что эти кнопки:

<button class="flickity-prev-next-button-222 previous" type="button" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button>

они как бы создаются слайдером,  возможно поэтому я не могу вызвать событие клика по ним к примеру тем же методом trigger для jQuery.

[spectre]

$(document).on('click', 'selector', function(){

 

})

[ArtemPitov]

@kairos тогда Вам нужно вызывать события клика на самом контейнере слайдер и отслеживать клик

 

document.getElementById('section-slideshow').addEventListener('click', function (e) {
    if (!e.target) {
        return false;
    }

    var target = e.target.closest('.flickity-prev-next-button');

    console.log(target);

});