Как так сделать на чистом js?

Question

[dev400]

В jquery мы по клику на элемент с каким либо классом можем получить его свойства и атрибуты через this

например так

<ul>
        <li><a href="#" class="link">Ссылка1</a></li>
        <li><a href="#" class="link">Ссылка2</a></li>
        <li><a href="#" class="link">Ссылка3</a></li>
        <li><a href="#" class="link">Ссылка4</a></li>
        <li><a href="#" class="link">Ссылка5</a></li>
    </ul>

$('.link').click(function(){

    alert($(this).text());

});

А в чистом js мы получаем массив

var links = document.getElementsByClassName('link');

У которого соответственно нет метода addEventListener().
И как быть? В цикле бегать по массиву?

for(var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function() {
            alert(this.text);
        });
    }

Не гуд так делать, я думаю

Comments

[Decadal]

jQuery это же не заклинание которое позволяет избежать циклов. У него под капотом именно такие циклы и лежат. Ну, похожие

Answer 1

[Rsa97]

Так jQuery именно это и делает, только элегантнее, через forEach.

Comments

[dev400]

разве так элегантнее?))

var links = document.getElementsByClassName('link');

    links.forEach = [].forEach;

    links.forEach(function(item) {
        item.addEventListener('click', function() {
            alert(this.text);
        });
    });

поскольку htmlcollection это не совсем массив, то forEach приходится заимствовать

[Ivan Bogachev]

dev400: обычно используют call:

[].forEach.call(links, function(link) {
    link.addEventListener('click', function() {
        ....
    });
});

[dev400]

Ivan Bogachev: благодарю

[Rsa97]

dev400: Да, вы правы. Посмотрел в исходниках реализацию each, там обычный for.

Answer 2

[Decadal]

stackoverflow.com/questions/19655189/javascript-cl...

Answer 3

[Дмитрий Лузанов]

Есть ещё вариант:

var parent = document; // или document.getElementByTagName('ul');
parent.addEventListener('click', function(e) {
	if (e.target.tagName === 'LI') { // или тот который вам нужен
		// тут чо-нибудь делаем
	}
});