24

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

我使用这个 Html 代码:

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

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

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

8 回答 8

52

或者,如果您不使用 jQuery:

document.getElementById('forgotpass').onclick = forgotpass;
于 2012-07-30T11:04:40.987 回答
28

纯 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();
  });
});
于 2012-07-30T11:05:32.197 回答
3

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

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

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

于 2015-11-26T07:39:36.813 回答
2

你可以用 jQuery 来做到这一点

$("#forgotpass").click(function() {
  alert("Handler for .click() called.");
});
于 2012-07-30T11:02:33.673 回答
2

在纯 JavaScript 中,您可以执行以下操作:

function forgotpass() {
 //..code
}

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

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

如果你使用 jQuery,你可以这样做:

function forgotpass() {
 //..code
}

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});
于 2012-07-30T11:05:54.207 回答
2

如果只需要支持 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 Daniel's answer

于 2014-04-03T23:02:43.857 回答
0

直接在 HTML 中添加事件列表器:

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

参考:W3CSchools

祝你好运!

于 2017-08-03T07:04:43.453 回答
0

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

$("#forgotpass").off().on('click', function () { 
    forgotPass(); 
});
于 2017-09-18T21:11:53.693 回答