使用脚本设置onclick事件

Question

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

我使用这个Html代码：

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

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

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

Answer 1

或者，如果您不使用jQuery：

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

Answer 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();
  });
});

Answer 3

这样的事情可能有用......

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

如果您不添加该功能，javascript将在脚本运行后运行onclick。

Answer 4

你可以使用像jQuery这样的

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

Answer 5

在纯JavaScript中你可以这样做：

function forgotpass() {
 //..code
}

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

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

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

function forgotpass() {
 //..code
}

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

Answer 6

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 如果您需要支持旧浏览器，我建议Speransky Danil's answer。

Answer 7

直接在HTML中添加event-listner：

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

参考：W3CSchools

祝你好运！

Answer 8

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

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