recarga - evento al salir de la pagina javascript
¿Por qué addEventListener se dispara antes del evento si es que lo hace? (2)
En primer lugar, su uso del oyente Add Event es incorrecto. add event listener espera una referencia de función en el segundo parámetro, no una llamada de función.
La siguiente es una referencia de función:
var myfunctionreference = addTextNode;
Esta es una llamada de función y ejecutará la función
var myfunctioncall = addTextNode();
En su código, en realidad está llamando a la función para utilizarla como controlador de eventos en lugar de hacer referencia a ella. Aquí hay alguna referencia para .addEventListener ()
Deberías vincular el evento de esta manera:
button.addEventListener("click", addTextNode);
Segundo, el evento conoce el elemento y conoce el evento. Su llamada de función debe crearse para aceptar el evento y no una cadena arbitraria. Luego, utilizar el evento o "esto" le permitirá tener en sus manos el texto que busca.
function addTextNode(evt) {
var newtext = document.createTextNode(this.innerHTML),
p1 = document.getElementById("p1");
p1.appendChild(newtext);
}
Esta pregunta ya tiene una respuesta aquí:
Estaba experimentando [en jsfiddle] con una función creada para agregar un TextNode recién creado al <p> en el HTML a continuación:
<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>
Aquí está mi javascript también:
function addTextNode(text) {
var newtext = document.createTextNode(text),
p1 = document.getElementById("p1");
p1.appendChild(newtext);
}
Esto funciona bien Sin embargo, el quid de la cuestión se revela cuando intento que mi javascript sea ''discreto'' eliminando el comportamiento del marcado ...
<button>YES!</button>
<button>NO!</button>
<button>WE CAN!</button>
<hr />
<p id="p1">First line of paragraph.</p>
luego, utiliza un bucle para adjuntar addEventListener a cada elemento <button> , que a su vez usa el secundario TextNode para llamar a 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));
}
Dos cosas extrañas suceden con mi código:
Cuando [jsfiddle''s] Code Wrap está establecido en ''no wrap-in head'', no ocurre nada.
Sin embargo, cuando Code Wrap está configurado en ''onLoad'', ''onDomReady'' o ''no wrap-in body'' la función se ejecuta antes del clic y obtengo esto .
¿Podría alguien decirme qué me estoy perdiendo?
La raíz de tu problema está aquí:
button.addEventListener("click", addTextNode(button.innerHTML))
Está ejecutando la función en lugar de pasarla al oyente del evento. En su lugar, pase la función por referencia, luego obtenga innerHTML dentro de la función.
function addTextNode() {
var newtext = document.createTextNode(this.innerHTML),
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);
}