web-dev-qa-db-fra.com

OnClick sans jQuery

Comment faire onclicksans jQuery, sans code supplémentaire en HTML, tel que:

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

Vous utilisez simplement un fichier js externe?

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

J'ai besoin de remplacer ce code:

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

Lorsque cette ancre ne contiendra qu'une seule fonction à gérer lors d'un clic, 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 également d'appeler le code ci-dessus lorsque tous les éléments sont chargés (par exemple, sur window.onload)

-- Éditer

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 qch 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});
      }
   }
});
60
Rafael

que dis-tu de ça :

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

Le W3C suggère:

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

Microsoft utilise:

element.attachEvent('onclick',doSomething)

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

De http://www.quirksmode.org/js/events_advanced.html .

5
Corbin March

Sans code supplémentaire dans le html, voici un moyen 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>
2
RichieHindle
<script>
 function tramtramtram(){
     alert("tram it!");
 }
</script>


<a href="#" onclick="tramtramtram()">tramtram</a>
1
bchhun

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

1
ka3751

Exécutez ce script lors du chargement du document (en remplaçant alert par votre contenu):

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

C'est peut-être ce que vous demandez ...

1
buti-oxa

Utilisez simplement l'attribut onclick .

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

Ou pour le faire depuis javascript,

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

Vous devez utiliser getElementById pour ajouter le gestionnaire onclick. Cependant, vous devez initier votre code quelque part. Sans jQuery, vous ne pouvez utiliser que le gestionnaire de chargement de corps:

<body onload="myinitfunction()">

myinitfunction peut être dans un fichier js externe.

0
kgiannakakis