Почему addEventListener срабатывает перед событием, если вообще? [Дубликат]
На этот вопрос уже есть ответ:
Javascript Событие «addEventListener» запускается при загрузке страницы [duplicate] 2 ответа Я экспериментировал [в jsfiddle] с функцией, созданной для добавления вновь созданногоTextNode на<p> в HTML ниже:
<button onclick="addTextNode('YES! ');">YES!</button>
<button onclick="addTextNode('NO! ');">NO!</button>
<button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
<hr />
<p id="p1">First line of paragraph.</p>
Вот и мой javascript:
function addTextNode(text) {
var newtext = document.createTextNode(text),
p1 = document.getElementById("p1");
p1.appendChild(newtext);
}
Это отлично работает. Однако суть проявляется, когда я пытаюсь сделать свой javascript «ненавязчивым», удаляя поведение из разметки ...
<button>YES!</button>
<button>NO!</button>
<button>WE CAN!</button>
<hr />
<p id="p1">First line of paragraph.</p>
затем используя цикл для прикрепленияaddEventListener для каждого<button>лемент @, который в свою очередь использует дочерний элементTextNode звонитьaddTextNode:
function addTextNode(text) {
var newtext = document.createTextNode(text),
p1 = document.getElementById("p1");
p1.appendChild(newtext);
}
var btns = document.getElementsByTagName("button");
for(i = 0; i < btns.length; i++){
var button = btns[i];
button.addEventListener("click", addTextNode(button.innerHTML));
}
Две странные вещи случаются с моим кодом:
Когда [jsfiddle's] Код Wrapля @ установлено значение «без переноса - в голове», ничего не происходи
Но когда Код Wrap имеет значение «onLoad», «onDomReady» или «без переноса в теле», функция запускается до щелчка, и я получаюэт.
Может кто-нибудь сказать мне, что мне не хватает?