【问题标题】：Set onclick event using script使用脚本设置 onclick 事件
【发布时间】：2012-07-28 00:58:47
【问题描述】：

我想让我的script 设置onclick 的<div> 属性。

我使用这个 Html 代码：

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

我想在用户点击<div>时运行一个forgotpass()函数，但我不想用这个：

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

【问题讨论】：

标签： javascript html dom events dom-events

【解决方案1】：

或者，如果您不使用 jQuery：

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

【讨论】：

到目前为止一天有 245 次代表？杀手！并为客观答案 +1。
这帮助我解决了一个问题。我试图做类似document.getElementById('forgotpass').onclick = forgotpass(); 的事情，但你指出不应该包括括号-谢谢

【解决方案2】：

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

或者：

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

【讨论】：

当使用 jQuery 时，最好按照以下方式进行，如果上述代码被多次执行 - 可能会有实际情况。否则会注册多个事件句柄$("#forgotpass").off().on('click', function () { forgotPass(); });

【解决方案3】：

这样的事情可能会奏效..

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

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

【讨论】：

这是最好的答案，因为它允许您调用函数并传递值

【解决方案4】：

你可以用 jQuery 来做到这一点

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

【讨论】：

【解决方案5】：

在纯javascript中你可以这样做：

function forgotpass() {
 //..code
}

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

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

如果你使用 jQuery，你可以这样做：

function forgotpass() {
 //..code
}

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

【讨论】：

为什么它是幼稚和糟糕的做法？
我不知道幼稚或糟糕的做法，但addEventListener 而非onclick 的最高排名和公认答案的偏好得到developer.mozilla.org/en-US/docs/Web/API/EventTarget/… 的支持，这描述了原因：不像onclick , addEventListener 可以在事件传递到 DOM 时捕获它，防止它冒泡备份 DOM，并且可以用于添加多个事件处理程序。

【解决方案6】：

如果只需要支持 IE 9+ (source)，可以在纯 JavaScript 中使用EventTarget.addEventListener。

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

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

&lt;button id="forgotpass"&gt;Forgot Password?&lt;/button&gt;

如果你需要支持旧版浏览器，我推荐Speransky Danil's answer。

【讨论】：

【解决方案7】：

直接在 HTML 中添加事件列表：

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

参考：W3CSchools

祝你好运！

【讨论】：

【解决方案8】：

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

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

【讨论】：