web-dev-qa-db-fra.com

définir un événement onclick à l'aide d'un script

Je veux que ma script définisse la convenance onclick d'un <div>.

J'utilise ce code HTML:

<div id="forgotpass">Forgot Password?</div>

Je souhaite qu'un utilisateur clique sur le <div> une fonction forgotpass() à exécuter, mais je ne souhaite pas l'utiliser:

<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>
javascripthtmleventsdomjavascript-events
20
Γεώργιος Βιδαλάκης

Pure JavaScript: 

function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}

function removeListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.removeEventListener(eventName, handler, false);
  }
  else if (element.detachEvent) {
    element.detachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = null;
  }
}

addListener(document.getElementById('forgotpass'), 'click', forgotpass);

jQuery: 

$(document).ready(function() {
  $("#forgotpass").click(forgotPass);
});

Ou: 

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});
24
Danil Speransky

Sinon, si vous n'utilisez pas jQuery:

document.getElementById('forgotpass').onclick = forgotpass;
45
Summoner

Si vous devez uniquement prendre en charge IE 9+ ( source ), vous pouvez utiliser EventTarget.addEventListener en JavaScript pur.

function forgotpass() {
  alert("Hello, world!");
}

var element = document.getElementById("forgotpass");
element.addEventListener("click", forgotpass, false);
<button id="forgotpass">Forgot Password?</button>
Si vous avez besoin de supporter des navigateurs plus anciens, je recommande La réponse de Speransky Danil .

2
Nick McCurdy

En javascript pur, vous pouvez faire:

function forgotpass() {
 //..code
}

var el = document.getElementById("forgotpass");
el.onclick = forgotpass;

mais c’est très naïf, pas flexible et probablement une mauvaise pratique.

Si vous utilisez jQuery, vous pouvez faire:

function forgotpass() {
 //..code
}

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});
2
Strelok

Quelque chose comme ça pourrait marcher ..

var div = document.getElementById("forgotpass");
div.onclick=function(){ /*do something here */ };

si vous n’ajoutez pas la fonction, javascript exécutera onclick une fois qu’il aura été exécuté.

2
Frøknen

Vous pouvez le faire avec jQuery comme

$("#forgotpass").click(function() {
  alert("Handler for .click() called.");
});
2
Dr. Dan

Si vous utilisez jQuery, mieux vaut procéder comme suit. Si l'appel de fonction est exécuté plusieurs fois, plusieurs traitements d'événement seront enregistrés. L’approche suivante garantit que les gestionnaires précédents sont supprimés

$("#forgotpass").off().on('click', function () { 
    forgotPass(); 
});
0
warunanc

Ajouter event-listener directement dans le HTML:

...
<div>
    <input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
    function setCookie() {
        console.log('ready to set cookie?');
    }
</script>
...

Référence: W3Schools

Bonne chance!

0
Akash