<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>var elements = document.getElementsByClassName("asd"),
length_of_elements = elements.length,
setContent = function(){
this.innerHTML = 'lol';
}, i;
for (i=0;i<length_of_elements;i++) {
elements[i].addEventListener('click',setContent,false);
}var t
keyAction = function(e) {
return (t = actions[e.keyCode]) && t(e)
}$(document).on("keydown", function(event) {
return actions[event.which] && actions[event.which](event);
});var t
keyAction = function(e) {
return (t = actions[e.keyCode]) && t(e)
}var body = document.body, html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
Функции jQuery рассчитанные на модификацию элементов DOM умеют автоматически определять что в них передано - один элемент или массив. На самом деле все не так просто, но сильно упрощенно это выглядело бы так:
Если в функцию передан один элемент, то эта функция выполняется только для него, а если передан массив элементов, то функция выполняется для каждого элемента в массиве. Конструкция $('.asd').on('click', handler) вешает обработчик на все элементы, найденные селектором '.asd', будь их 100, 1 или 0, и конечно же она все равно использует цикл для того чтоб это сделать, по-другому быть не может. Скорее всего jQuery функция будет даже дольше выполняться ввиду сложности внутренней логики jQuery.
По поводу третьего аргумента addEventListener: да, это называется "всплытие событий", но объяснить на словах у меня не получится. Я попробую: если у вас есть 5 вложенных друг в друга элементов и на каждом висит on('click'), то при нажатии на самый верхний выполнятся все обработчики, начиная с того, на какой непосредственно элемент кликнул пользователь: 5, 4, 3, 2, 1.
Если например на третий элемент обработчик повешен с атрибутом useCapture=true (вот так - addEventListener('click', handler, true)), то при клике на самый верхний элемент, последовательность вызовов будет такая: 3, 5, 4, 2, 1.
Также порядок выполнения обработчиков, которые используют capture mode, обратный, то есть если обработчики всех элементов используют capture mode, при клике на самый верхний элемент последовательность будет такая: 1, 2, 3, 4, 5, сначала выполнится обработчик родительского элемента.
Я сделал маленькую демку, можете поиграться с режимами. При клике на строку "useCapture attribute of..." режим обработчика для соответствующего элемента меняется и отображается в этой же строке. По клику на разноцветные блоки появится надпись, отражающая последовательность вызовов, например если средний элемент будет использовать capture mode, а остальные - нет, то последовательность будет выведена такая: two + three + one