web-dev-qa-db-fra.com

Comment ajouter onclick à un élément HTML de manière dynamique en utilisant javascript

Je peux créer un élément de bouton et ajouter un événement onclick comme indiqué ci-dessous.

elem.onclick=function()
{
alert("qweqweqwe");
}

Comment utiliser une fonction prédéfinie au lieu de définir une fonction dans l'événement? Quelque chose comme:

elem.onclick=func();
javascripthtmlonclicklistener
10
user3454558

ajoutez un eventlistener à l'élément qui a une fonction définie à appeler:

elem.addEventListener("click", func, false); //where func is your function name

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

19
ylerjen

Le meilleur moyen que j'ai découvert pour moi est comme ci-dessous.

const li = document.createElement('li');
        li.innerText = "client";
        li.id ="key";
        li.className = "client-class";
        li.setAttribute("onclick","valid;");
7
Achuth hadnoor

1)

function myfunction(){
alert("hello");
}

elem.onclick=myfunction();

ou

2)

var myfunction=function(){
alert("hello");
}
elem.onclick=myfunction;
//or
elem.onclick=myfunction.call();
3
Tuhin
var clickHandler = function(){

};

elem.onclick = clickHandler;

function clickHandler(){

};

elem.onclick = clickHandler;

functions sont fondamentalement des types de variables dans javascript

si cela est fait comme dans la méthode 1, c'est évident.

mais même si vous le faites comme dans la méthode 2, il fait la même chose, crée une variable nommée clickHandler et tapez function avec value, le corps de la fonction.

quand tu fais

elem.onclick = function(){};

vous créez une fonction anonyme sans nom et vous l'attribuez à onclick de l'élément

Pendant ce temps cette méthode de liaison des gestionnaires aux événements est en quelque sorte déconseillée. La plupart des navigateurs ont de meilleures méthodes pour le faire, en résolvant de nombreux problèmes courants tels que l'ajout de plusieurs gestionnaires au même événement. Une fois que vous avez compris ce concept de fonctions, passez à autre chose et vérifiez les inscriptions d’événements du modèle W3C par opposition à ce modèle traditionnel. L'utilisation de la méthode traditionnelle est bien prise en charge et, d'accord, il se trouve que vous disposez de meilleures options techniques.

0
sabithpocker