Détection d'événement Javascript

Question

Je ne trouve pas de bonne documentation à ce sujet, alors je l'affiche ici.

Quelle est la equivilent javascript brut à ceci:

$(elem).click(function(){ 
    alert(this.text()); 
}); 

Tout ce que je peux trouver est ce <elem onlick="func()" /> qui est pas ce que je veux, je veux être en mesure de le faire juste avec javascript pas dans le cadre d'un élément.

Answer 1

En supposant elem est un nœud d'élément (sinon, vous devrez travailler votre sélection dans l'utilisation de getElementById ou autre):

elem.onclick= function() { 
    var text= 'textContent' in elem? elem.textContent : elem.innerText; 
    alert(text); 
}; 

textContent est la façon standard d'obtenir du texte à partir d'un élément; innerText est la façon IE. (Il y a quelques différences, mais heureusement rien qui vous affectera.) Si vous avez besoin de supporter des navigateurs anciens/obscurs qui n'ont ni vous ni vous devrez faire une marche en arbre fastidieuse pour ramasser tout le texte (c'est ce que fait text() de jQuery .)

(Je suppose que ce que vous voulez de this.text() qui ne serait pas réellement travailler -. sans doute que vous vouliez dire $(this).text())

Answer 2

Vous pouvez faire object.onclick = handler

var el = document.getElementById('elem'); 
elem.onclick = function(){ alert("Clicked!") }; 

Cela devrait fonctionner - je suis un peu ropey javascript de nos jours!

Answer 3

Peut-être que vous avez besoin de quelque chose comme ça:

document.getElementById('element_id').setAttribute("onclick","alert('hello world')"); 

Answer 4

Il existe plusieurs façons de joindre un gestionnaire de clic sans utiliser une bibliothèque.. La première consiste à attribuer une fonction à la propriété on[eventname] d'un élément:

element.onclick = function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
} 

Vous pouvez également attribuer une chaîne de code à évaluer, mais il est pas aussi jolie et généralement évité. Une autre façon est d'utiliser la norme w3c addEventListener:

element.addEventListener("click", function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}, false); 

Ce n'est pas pris en charge par les versions actuelles de IE qui nécessitent attachEvent place:

element.attachEvent("onclick", function() { 
    alert(event.srcElement.innerText); 
}); 

IE a des problèmes d'application de la fonction de l'élément qui a déclenché la événement, donc this ne pointera pas correctement sur cet élément avec attachEvent.

La première méthode element.onclick est utile pour la compatibilité x-navigateur et le codage rapide, mais vous ne pouvez affecter qu'une seule fonction à la propriété. En utilisant attachEvent et addEventListener vous pouvez attacher autant de fonctions que vous le souhaitez et ils tireront tous correctement. Vous pouvez créer un navigateur semi-équivalent en effectuant des vérifications de fonctionnalités simples dans votre code:

if ("addEventListener" in element) 
    element.addEventListener("click", function (eventObj) { 
     alert("textContent" in this ? this.textContent : this.innerText) 
    }, false); 
else 
    element.attachEvent("onclick", function() { 
     alert(event.srcElement.innerText); 
    });