it-swarm.com.de

setzen Sie das Onclick-Ereignis mithilfe des Skripts

Ich möchte, dass meine script die onclick-Eigenschaft eines <div> setzt.

Ich verwende diesen HTML-Code:

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

Ich möchte, wenn ein Benutzer auf <div> klickt, eine forgotpass()-Funktion ausführen, aber ich möchte dies nicht verwenden:

<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>

Reines 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);
});

Oder:

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

Alternativ, wenn Sie jQuery nicht verwenden:

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

Wenn Sie nur IE 9+ ( source ) unterstützen müssen, können Sie EventTarget.addEventListener in reinem JavaScript verwenden.

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

var element = document.getElementById("forgotpass");
element.addEventListener("click", forgotpass, false);
<button id="forgotpass">Forgot Password?</button>
Wenn Sie ältere Browser unterstützen müssen, empfehle ich die Antwort von Speransky Danil .

2
Nick McCurdy

In reinem Javascript können Sie:

function forgotpass() {
 //..code
}

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

dies ist jedoch sehr naiv, nicht flexibel und wahrscheinlich eine schlechte Praxis.

Wenn Sie jQuery verwenden, können Sie Folgendes tun:

function forgotpass() {
 //..code
}

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

So etwas könnte funktionieren ..

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

wenn Sie die Funktion nicht hinzufügen, führt das Javascript den Onclick aus, sobald er durch das Skript läuft.

2
Frøknen

Du kannst es mit jQuery gerne machen

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

Wenn Sie jQuery verwenden, gehen Sie am besten wie folgt vor. Wenn der Funktionsaufruf mehr als einmal ausgeführt wird, werden mehrere Eventhandles registriert. Der folgende Ansatz stellt sicher, dass die vorherigen Handler entfernt werden

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

Event-Listener direkt im HTML-Code hinzufügen:

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

Referenz: W3Schools

Viel Glück!

0
Akash