Cómo puedo vincular un clic a un anclaje sin un marco (javascript)

Question

Sé que esto se hace fácilmente en jQuery o en cualquier otro marco, pero ese no es realmente el punto. ¿Cómo hago para vincular "correctamente" un evento de clic en javascript puro? Yo sé cómo hacerlo en línea (ya sé que es terrible)

<a href="doc.html" onclick="myFunc(); return false">click here</a> 

y esto hace que mi javascript para ejecutar un navegador habilitado JS, y el enlace a comportarse normalmente para aquellos sin javascript?

Ahora, ¿cómo hago lo mismo de una manera no en línea?

Answer 1

El movimiento estándar para de esta pregunta está en el modo no estándar: http://www.quirksmode.org/js/events_advanced.html

Answer 2

Si necesita asignar un único click caso, puede asignar onclick:

Si tiene un ID:

myAnchor = document.getElementById("Anchor"); 
myAnchor.onclick = function() { myFunc(); return false; } 

también se puede caminar a través de todos los anclajes:

anchors = document.getElementsByTagName("a"); 

for (var i = 0; i < anchors.length; i++) { 

anchors[i].onclick = ..... 

} 

También hay un document.getElementsByClassName para simular el selector de clases de jQuery, pero no es compatible con todos los navegadores.

Si puede ser que necesite asignar múltiples eventos en un elemento, vaya con addEventListener mostrado por @Jordan y @David Dorward.

Answer 3

La forma básica es usar document.getElementById() para encontrar el elemento y luego usar addEventListener para escuchar el evento.

en el código HTML:

<a href="doc.html" id="some-id">click here</a> 

En el JavaScript:

function myFunc(eventObj) { 
    // ... 
} 

var myElement = document.getElementById('some-id'); 
myElement.addEventListener('click', myFunc); 

O puede utilizar una función anónima:

document.getElementyById('some-id').addEventListener('click', function(eventObj) { 
    // ... 
}); 

Answer 4

darle un ID y usted debería ser capaz hacer:

document.getElementById("the id").onclick = function{ ... } 

Answer 5

No tiene que usar jQuery, pero podría probar la popular función addEvent de John Resig.

addevent(elem, "click",clickevent); 

function addEvent (obj, type, fn) { 
     if (obj.attachEvent) { 
     obj["e"+type+fn] = fn; 
     obj[type+fn] = function() { obj["e"+type+fn](window.event); } 
     obj.attachEvent("on"+type, obj[type+fn]); 
     } else 
     obj.addEventListener(type, fn, false); 
    } 

Hay más cosas que se deben considerar para 'enlazar' adecuadamente un evento en etiquetas HTML en javascript puro.

http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Answer 6

Este es un buen método de cross-browser

var on = (function(){ 
    if ("addEventListener" in window) { 
     return function(target, type, listener){ 
      target.addEventListener(type, listener, false); 
     }; 
    } 
    else { 
     return function(object, sEvent, fpNotify){ 
      object.attachEvent("on" + sEvent, function(){ 
       fpNotify(window.event); 
      }); 
     }; 
    } 
}()); 


on(document.getElementById("myAnchor"), "click", function(){ 
    alert(this.href); 
}); 

Answer 7

Gracias a Pekka, recordar oyentes de unión a la totalidad de gama de elementos con una cierta clase, aumenta rápidamente el número de eventos unidos a elementos.

uso del bucle de una manera más rápida:

for (var i = Things.length - 1; i >= 0; i--) { 
    Things[i] 
}; 

la primera expresión de bucle calculará sólo una vez, por lo que de esta manera, no lo hará a través del DOM y calcular la longitud de la matriz , además, debido a que la estructura de la pila al pisar Arrays en reversa es más rápida que avanzar.