web-dev-qa-db-fra.com

Comment attraper un événement de clic avec Javascript simple?

Je sais qu'en utilisant jQuery, vous pouvez faire $('element').click(); pour capturer l'événement click d'un élément HTML, mais comment faire cela avec Javascript simple?

javascripthtmlonclick
22
chromedude
document.getElementById('element').onclick = function(e){
  alert('click');
}

DÉMO: http://jsfiddle.net/e9jZW/1/

40
Rocket Hazmat

En ajoutant un écouteur d'événements ou en définissant onclick handler d'un élément:

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

Notez que le style d'écoute pair permet d'ajouter plusieurs écouteurs alors que le style du gestionnaire de rappel est exclusif (il ne peut y en avoir qu'un).

Si vous devez ajouter ces gestionnaires à plusieurs éléments, vous devez les acquérir comme il convient et les ajouter à chacun séparément.

14
maerics

Je crée généralement une sorte de gestionnaire d'événement global, très puissant, vous pouvez capturer className, de l'événement "types" nodeTypes, vous l'appelez, j'espère que les gens trouveront cela utile

document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

         // evt.type could be, mouseup, mousedown...
        // elem.id is the id or the element
        // elem.className is the class name of the element
        // you could nest expression, use substrings to extract part of a className
        if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}
2
david

Je recommanderais d'utiliser addEventListener au lieu d'affecter directement la fonction de gestionnaire.

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

Il y a plusieurs raisons pour lesquelles je vais nommer celles que je trouve les plus importantes:

  1. Vous ne pouvez pas ajouter par erreur un écouteur d'événements à un objet non DOM avec addEventListener - votre code échouerait au lieu d'assigner discrètement la fonction onclick à un objet
  2. Vous pouvez attacher n seul (sans manipulation de code supplémentaire pour chaque gestionnaire que vous souhaitez ajouter) écouteur d'événements avec onclick - quelque chose qui pourrait s'avérer limitant
2
ZenMaster

Merci à Vanilla js

document.addEventListener('click', function (event) {

// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('input')) return;

// Don't follow the link
event.preventDefault();

// Log the clicked element in the console
console.log(event.target);

}, false);

Cela montre également quel élément est c

1
Krishna Gupta

Voici un article intéressant à ce sujet, j'ai utilisé la même approche quelques fois, en gros, vous ajoutez le gestionnaire d'événements à window. http://mislav.uniqpath.com/js/handling-events-on-elements/

0
VoidMain