Как настроить событие на элемент отслеженный getElementsByClassName???

Question

[Umid]

К примеру:
var getWithId = document.getElementById("asd");
getWithId.onclick = function(){
this.innerHTML = "value";
}
Так всё работает!

ну а если заменить getElementById на getElementsByClassName, то ничего и не срабатывает.

Answer 1

[Andrey Dyrkov]

по id возвращает элимент, а по классу возвращает коллекцию
берите просто элимент который хотите

document.getElementsByClassName('asd')[0].addEventListener('click',function(){console.log('click!')},false);

Comments

[Umid]

а как отследить элемент на который кликнули??

[Andrey Dyrkov]

Umid: обработчик события получает объект event у него есть свойство target - это ссылка на элемент по которому именно нажали

[Umid]

Andrey Dyrkov: а как взять target??

[Kovalsky]

document.getElementsByClassName('asd')[0].addEventListener('click',function(e){console.log(e.target)},false);

Так?

[Andrey Dyrkov]

Никита Полевой: да

[Umid]

Никита Полевой: а почему же после ('asd') написали [0]?? зачем нам нулевое значение?

[Kovalsky]

Это нулевой индекс, то есть мы берем элемент с индексом 0, самый первый элемент в массиве, который возвращает метод getElementsByClassName('asd').

А вообще парень этим примером хотел показать, что метод addEventListener существует только у элементов dom, и следовательно вызывать его надо для каждого нужного элемента.

Например, если переписать ваш пример так, чтобы он работал с массивом элементов, то получится как-то так:

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);
}

[Umid]

Никита Полевой: т.е. как в jquery (по моему было так):
$(".asd").on("click",function(){
console.log(this.value);
});
Так сделать не удастся без перебирания циклом??
А разве это не затратно??

[Umid]

Никита Полевой: И ещё 1 вопрос, зачем пишется булевое значение в addEventListener??

[Andrey Dyrkov]

Umid: это всплытие событий, загуглите "всплытие событий в js"

[Kovalsky]

Umid:
Функции jQuery рассчитанные на модификацию элементов DOM умеют автоматически определять что в них передано - один элемент или массив. На самом деле все не так просто, но сильно упрощенно это выглядело бы так:

function on(arg, function_to_apply)  {
	if (Array.ifArray(arg)) {
		for (i = 0; i < arg.length; i++ ) {
			function_to_apply( arg[i] );
		}
	} else {
		function_to_apply( arg );
	}
}

Если в функцию передан один элемент, то эта функция выполняется только для него, а если передан массив элементов, то функция выполняется для каждого элемента в массиве. Конструкция $('.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

[Umid]

Andrey Dyrkov: Спасибо!

[Umid]

Никита Полевой: Ух тыж. Спасибо большое!

[Umid]

Никита Полевой: Думаю мне стоит здесь хорошенько разобраться!

[Umid]

Никита Полевой: может я опять что то недопонял, но зачем же вообще ставить это всплытие??

Далее событие сначала двигается вниз от корня документа к event.target, по пути вызывая обработчики, поставленные через addEventListener(...., true).
Далее событие двигается от event.target вверх к корню документа, по пути вызывая обработчики, поставленные через on* и addEventListener(...., false).

Не легче ли будет вообще не вписывать его?

[Umid]

Никита Полевой: и опять у мне не удаётся поставить событие на элементы взятые классом. Где я ошибся?

https://jsfiddle.net/qn49g3ru/

[Kovalsky]

Umid:
Если вы имеете ввиду зачем вписывать false если useCapture и так по дефолту будет равен false, то да, в некоторых случаях можно обойтись без него, т.к. вызов addEventListener('click', handler) аналогичен вызову addEventListener('click', handler, false). Но в некоторых случаях из удобства (и не только) этот аргумент не опускается. Например, у меня в примере: чтобы вешать обработчики я использую и true, и false значения useCapture, поэтому чтобы снимать обработчики, мне нужно различать обработчики на те которые используют capture, и те которые не используют, ибо если на элемент повешены обработчики обоих типов:

el.addEventListener('click', handler, false);
el.addEventListener('click', handler, true);

...то снять все обработчики с useCapture=true можно будет только явно указав useCapture=true в функции removeEventListener, и например такой код не уберет все обработчики:

el.removeEventListener('click', handler);
el.removeEventListener('click', handler);

...зато такой уберет:

el.removeEventListener('click', handler, false);
el.removeEventListener('click', handler, true);

А если вы имеете ввиду что не видите смысла в использовании capture режима, то тут я могу сказать только то, что если вы не видите как можно применить фичу, то она для вас наверное и впрямь бесполезна, и станет полезной только тогда, когда вы наткнетесь на необходимость использовать ее. Не знаю, какой пример вам дать, чтоб вы убедились в том, что эта фича полезна. Ну например если при клике на какие-то элементы нам сначала нужно вызвать обработчик родительского элемента, то у родителя useCapture должен быть true, а у элементов внутри него - false.

[Umid]

Никита Полевой: А что на счёт ошибки? Где у меня там ошибка?

[Kovalsky]

По ошибке все просто: весь ваш код выполняется сразу же, ни одна из частей кода не ждет другую. А поскольку ваш скрипт завершает работу только спустя некоторое время, в последней части кода вы пытаетесь выбрать селектором элементы которых еще нет, а именно document.getElementsByClassName("section-span") не находит нужных элементов, потому что в момент его выполнения структура элемента body такая:

<body>
	<div id="block">
		...
		<div class="section" id="section-%number%">

		</div>
		...
	</div>
</body>

То есть в момент вызова функции document.getElementsByClassName("section-span") на странице есть только div#block с пустыми секциями; заполнены элементами span.section-span они будут позже.
Исправить это не исправляя основной код можно добавив лишнюю проверку к функции intervalOutputing, а именно после того, как колонка заполнена, проверять последняя ли это колонка, и если да, то выполнять ваш код. Вот рабочий пример.

Но логичней было бы подправить имеющийся алгоритм и потом уже добавлять туда обработчики, поэтому я все же советую вам разобрать все ошибки вашего кода, т.к. некоторые из них достаточно мощные, стоит залатать пробелы. Но впрочем как хотите, дальше можете не читать)

Для начала раскидайте ваш код так, как этого хочет jsfiddle: весь css код - в окошко CSS, весь html код - в html, и js - в js.
Получится так.

У вас в функции setContent опечатка: вы присваиваете значение this.innerHTMl, когда у элемента this нет такого свойства. Этому элементу будет добавлено свойство innerHTMl. Зато у этого элемента есть свойство innerHTML xD То есть вы ошиблись в последнем символе, а поскольку JS регистрозависим, то это критический логический баг.

У вас есть переменная makingColumsInterval, вы в нее кладете идентификатор, который вам возвращает функция setTimeout(). В том же месте у вас объявлена именованная функция rekurs() в которой столько ошибок, что работоспособность вашего кода я назвал бы чудом) Эта функция просто нерабочая. Вот эта часть кода:

var makingColumsInterval = setTimeout(function rekurs(){
 	 	if(randNumbersArray.length === columQty){
    	    clearTimeout(makingColumsInterval);
	    }
		var randomNum = getRandomNum(1, columQty);

		if(randNumbersArray.indexOf(randomNum) === -1) {
			randNumbersArray.push(randomNum);
			outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
		}
		var makingColumsInterval = (rekurs(),100);
},100);

1. В строке "var makingColumsInterval = (rekurs(),100);" туча ошибок: для начала вы объявляете переменную makingColumsInterval через ключевое слово var, таким образом делая ее видимой только внутри функции rekurs() во время её выполнения. А ведь ваша функция рассчитана на то, чтоб использовать внешнюю переменную makingColumsInterval. Потом в этой же строке вы пропустили 'setTimeout': хотели написать 'setTimeout(rekurs(),100)', а написали '(rekurs(),100)' (кстати, даже если бы вы не пропустили 'setTimeout', все равно все бы обрушилось, ибо скобки после имени функции означают ее немедленный вызов, а тогда функция setTimeout первым аргументов бы получила undefined, что привело бы к ошибке). Таким образом запись в переменную makingColumsInterval уже начата (то есть ссылка на внешнюю переменную makingColumsInterval уже стерта), но не закончена, т.к. rekurs() никогда не завершается. То есть завершается, но принудительно браузером. Поэтому rekurs() не видит внешнюю переменную makingColumsInterval, зато видит недоделанную внутреннюю, которая ввиду своей недоделанности равна undefined. Если бы вы заглянули в консоль, вы бы увидели, что ваш скрипт выполняется больше хрентиллиона раз, а потом аварийно вырубается.

Читайте эту статью про области видимости.

2. Теперь об этой части кода:

if(randNumbersArray.length === columQty){
	clearTimeout(makingColumsInterval);
}

Видимо предполагалось, что этот if должен остановить выполнение функции, но по факту происходит вот что: сравниваются значения переменных randNumbersArray.length и columQty, если они равны - чистится таймаут и продолжается выполнение функции, а если не равны, то чистка таймаута пропускается, а функция продолжает выполняться. Блок, который выполняется условным оператором if, никак не влияет на ход функции, и в итоге функция выполняется пока браузер не остановит ее, выдав ошибку too much recursion. Исправить это можно добавив после чистки таймаута инструкцию 'return;'

В целом ваша функция использует странную логику - она выполняется, потом создает еще раз отложенный вызов самой себя и так до тех пор, пока randNumbersArray.length не станет равен columQty. Вместо setTimeout можно использовать setInterval - первый аргумент у него это функция которая будет выполняться каждый промежуток времени, заданный вторым аргументов. Если бы вы использовали setInterval, вам бы пришлось создать и очистить интервал всего раз.

После исправлений ваша функция стала выглядеть вот так:

makingColumnsInterval = setInterval(function (){
    if(randNumbersArray.length === columQty){
        clearInterval(makingColumnsInterval);
        return;
    }
    var randomNum = getRandomNum(1, columQty);

    if(randNumbersArray.indexOf(randomNum) === -1) {
      randNumbersArray.push(randomNum);
      outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
    }
}, 100);

Далее: в функции intervalOutputing когда количество добавленных span'ов равно пятидесяти, вы вызываете функцию afterOutput, которая в свою очередь выполняет сама себя каждые десять секунд, и не чистит за собой таймаут.
Функция afterOutput судя по логике общего и своего собственного алгоритма (и даже по ее названию) рассчитана на то, что она будет вызвана не после того, как заполнится колонка, а после того, как будут заполнены все колонки, то есть вызвана она будет всего раз. Таким образом 1) можно смело удалять из нее setTimeout, 2) можно было бы исключить ее из intervalOutputing, но ввиду того что на заполнение колонки уходит время (следовательно заполнение цифрами можно считать оконченным не когда алгоритм приступит к заполнению последней колонки, а когда последняя колонка будет заполнена) придется ее оставить там и выполнять только когда myI === 50 и randNumbersArray.length === columQty.

Вот вам исправленная версия.