使用脚本设置 onclick 事件
Posted
技术标签:
【中文标题】使用脚本设置 onclick 事件【英文标题】:Set onclick event using script 【发布时间】: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>
【问题讨论】:
【参考方案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);
<button id="forgotpass">Forgot Password?</button>
如果你需要支持旧版浏览器,我推荐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();
);
【讨论】:
以上是关于使用脚本设置 onclick 事件的主要内容,如果未能解决你的问题,请参考以下文章
如何从 matplotlib 中的另一个脚本调用 onclick 事件?
如何使用 OnClick 事件设置 Jquery Mobile 导航