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>
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();
});
});
Sinon, si vous n'utilisez pas jQuery:
document.getElementById('forgotpass').onclick = forgotpass;
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>
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();
});
});
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é.
Vous pouvez le faire avec jQuery comme
$("#forgotpass").click(function() {
alert("Handler for .click() called.");
});
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();
});
...
<div>
<input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
function setCookie() {
console.log('ready to set cookie?');
}
</script>
...
Bonne chance!