OnClick sans jQuery

Comment faire onclick sans jQuery, sans code supplémentaire en HTML, par exemple:

 <a href="#" onclick="tramtramtram">

En utilisant simplement un fichier js extral?

 <script type="text/javascript" src="functions.js"></script>

Je dois remplacer ce code:

 $("a.scroll-up, a.scroll-down").click(function(){ SNavigate($(this).attr("href").substr(7));return false; });

Lorsque cette ancre ne contiendra qu'une seule fonction à gérer en cliquant, vous pouvez simplement écrire

 document.getElementById('anchorID').onclick=function(){/* some code */}

Sinon, vous devez utiliser la méthode 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

N'oubliez pas d'appeler le code ci-dessus lorsque tous les éléments sont chargés (p. Ex. Sur window.onload)

— modifier

Je vois que vous avez ajouté quelques détails. Si vous souhaitez remplacer le code ci-dessous

 $("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});

Avec sth qui n'utilise pas jQuery, cela devrait faire le travail

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

que dis-tu de ça :

 document.getElementById("lady").onclick = function () {alert('onclick');};

W3C suggère:

 element.addEventListener('click',doSomething,false)

Microsoft utilise:

 element.attachEvent('onclick',doSomething)

Vous pouvez effectuer une détection de fonctionnalité et déterminer quel appel utiliser.

À partir de http://www.quirksmode.org/js/events_advanced.html .

 <script> function tramtramtram(){ alert("tram it!"); } </script> <a href="#" onclick="tramtramtram()">tramtram</a>

Sans code supplémentaire dans le html, voici une façon de le faire:

 <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>

Var el = document.getElementById ('lady'); El.addEventListener ("clic", tramtramtram, false);

Exécutez ce script lorsque le document est chargé (en remplaçant l'alerte par vos données):

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

Peut-être que c'est ce que vous demandez …

Utilisez simplement l'attribut onclick .

 <a href="#" onclick="functionName(someParam)">

Ou pour le faire à partir de javascript,

 document.getElementById("anchorID").onclick = function(){ some code };

Vous devez utiliser getElementById pour ajouter le gestionnaire onclick. Toutefois, vous devez lancer votre code quelque part. Sans jQuery, vous ne pouvez utiliser que le chargeur de surcharge du corps:

 <body onload="myinitfunction()">

Myinitfunction peut être dans un fichier js externe.