Javascript 使用脚本设置 onclick 事件

set onclick event using script

提问by Γε?ργιο? Βιδαλ?κη?

I want to make my scriptset the onclickproperity of a <div>.

我想让我的script集合成为onclicka 的属性<div>。

I use this Html code:

我使用这个 Html 代码：

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

I want when a user clicks the <div>a forgotpass()function to run, but I do not want to use this:

我希望当用户单击要运行<div>的forgotpass()函数时，但我不想使用它：

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

回答by Summoner

Alternatively, if you're not using jQuery:

或者，如果您不使用 jQuery：

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

回答by Danil Speransky

Pure JavaScript:

纯 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:

jQuery：

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

Or:

或者：

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

回答by Fr?knen

Something like this might work..

像这样的东西可能会起作用..

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

if you dont add the function, the javascript will run the onclick once it runs through the script.

如果您不添加该函数，javascript 将在通过脚本运行后运行 onclick。

回答by Dr. Dan

You can do it with jQuery like

你可以用jQuery来做

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

回答by Strelok

In pure javascript you can do:

在纯 javascript 中，您可以执行以下操作：

function forgotpass() {
 //..code
}

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

but this is very naive, not flexible and probably a bad practice.

但这非常幼稚，不灵活，可能是一种不好的做法。

If you are using jQuery, you can do:

如果您使用的是 jQuery，则可以执行以下操作：

function forgotpass() {
 //..code
}

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

回答by Nick McCurdy

If you only need to support IE 9+ (source), you can use EventTarget.addEventListenerin pure JavaScript.

如果您只需要支持 IE 9+（源代码），则可以EventTarget.addEventListener在纯 JavaScript 中使用。

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

var element = document.getElementById("forgotpass");
element.addEventListener("click", forgotpass, false);

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

如果您需要支持旧浏览器，我建议 Speransky Danil's answer斯佩兰斯基丹尼尔的回答。

回答by Akash

Adding event-listner directly in the HTML :

直接在 HTML 中添加事件监听器：

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

Reference : W3CSchools

参考：W3CSchools

Good Luck!

祝你好运！

回答by warunanc

If you are using jQuery it's best if done as follows. If the function call is executed more than once multiple eventhandles will be registered. Following approach makes sure the previous handlers are removed

如果您使用 jQuery，最好按如下方式完成。如果多次执行函数调用，将注册多个事件句柄。以下方法确保删除以前的处理程序

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