Como hacer onclicksin jQuery, sin código adicional en HTML, como por ejemplo:OnClick sin jQuery
<a href="#" onclick="tramtramtram">
Simplemente usando presentar una js extrnal?
<script type="text/javascript" src="functions.js"></script>
tengo que sustituir este código:
$("a.scroll-up, a.scroll-down").click(function(){
SNavigate($(this).attr("href").substr(7));return false;
});
Cuando esta ancla contendrá sólo una función para manejar el clic, lo que simplemente puede escribir
document.getElementById('anchorID').onclick=function(){/* some code */}
lo contrario, usted tiene que utilizar el método DOM addEventListener
function clickHandler(){ /* some code */ }
var anchor = document.getElementById('anchorID');
if(anchor.addEventListener) // DOM method
anchor.addEventListener('click', clickHandler, false);
else if(anchor.attachEvent) // this is for IE, because it doesn't support addEventListener
anchor.attachEvent('onclick', function(){ return clickHandler.apply(anchor, [window.event]}); // this strange part for making the keyword 'this' indicate the clicked anchor
También recuerde llamar a la código anterior cuando se cargan todos los elementos (por ejemplo, en window.onload)
- editar
Veo que usted agregó algunos detalles. Si desea reemplazar el código de abajo
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
con algo que no utiliza jQuery, este debe hacer el trabajo
function addEvent(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent)
obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}
addEvent(window, 'load', function(){
for(var i=0, a=document.anchors, l=a.length; i<l;++i){
if(a[i].className == 'scroll-up' || a[i].className == 'scroll-down'){
addEvent(a[i], 'click', function(e){ SNavigate(this.href.substr(7)); e.returnValue=false; if(e.preventDefault)e.preventDefault();return false});
}
}
});
¿qué tal esto:
document.getElementById("lady").onclick = function() {alert('onclick');};
se ve bien. ¿Puedes reemplazar la función dada con js ordinarios, sin usar jquery? – Mike
Simplemente sobrescribe la propiedad onlick. Si estuviera usando addEventListener, también tendría que hacer un seguimiento de lo que agregó para eliminarlo más tarde (que sin duda es lo que JQuery usa). – Anonymous
@Mike: que es javascript "ordinario". Excepto que obtiene el elemento por id en lugar de por clase como su código. – bchhun
sólo tiene que utilizar el atributo onclick.
<a href="#" onclick="functionName(someParam)">
O hacerlo desde javascript,
document.getElementById("anchorID").onclick = function(){
some code
};
var el = document.getElementById ('señora'); el.addEventListener ("clic", trantramtram, falso);
Debe usar getElementById para agregar el controlador onclick. Sin embargo, debe iniciar su código en algún lugar. Sin jQuery sólo se puede utilizar el controlador onload del cuerpo:
<body onload="myinitfunction()">
myinitfunction puede estar en un archivo externo de JS.
onload - basura, ¿verdad? – Mike
Sin código extra en el html, aquí hay una manera de hacerlo :
<html><body><head><script> // This script could be in an external JS file
function my_handler(elt) {
alert("Yay!");
return false;
}
function setup() {
document.getElementById('lady').onclick = my_handler;
}
window.onload = setup;
</script></head>
<body><a href='#' id='lady'>Test</a></body>
</html>
¿se puede reemplazar una función dada con js común, sin usar jquery? – Mike
Ese * es * JavaScript normal, sin usar jQuery. – RichieHindle
hay un nuevo código en la pregunta – Mike
W3C sugiere:
element.addEventListener('click',doSomething,false)
Microsoft utiliza:
element.attachEvent('onclick',doSomething)
Puede detectar algunos rasgos y determinar qué llamada usar.
¿puedes eliminar el evento más tarde? ¿Qué pasa si se trata de un evento sin nombre, como una declaración de función, es decir. foo.addEventListener ('onclick', function() {alert ('bar')); o está conectado para siempre? –
(Solo tengo curiosidad, por cierto, no necesito este código ... solo estaba leyendo esta publicación y se me ocurrió la pregunta). –
Elimina el evento mediante element.removeEventListener (WC3) o element.detachEvent (MS). Desafortunadamente, esto no funciona para funciones anónimas. Me quedaría con las funciones nombradas para los controladores de eventos. –
Ejecutar este script cuando se carga el documento (en sustitución de alerta con sus cosas):
var rgLinks = document.getElementsByTagName("A");
for (var x=0; x<rgLinks.length; x++) {
el = rgLinks[x];
if (el.className == 'scroll-down' || el.className == 'scroll-down')
{
el.onclick = function() {alert('onclick');};
}
}
Tal vez eso es lo que usted está planteando ...
goood, gracias. Eso es lo que necesito. – Mike
También puede encontrar interesante la solución de Dean Edwards - http://dean.edwards.name/weblog/2005/10/add-event/ –
@Russ Cam: la solución de Dean Edwards tiene una desventaja, lo que Dean describió más adelante: http://dean.edwards.name/weblog/ – Rafael