使用脚本设置 onclick 事件

Posted

技术标签:

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

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

我使用这个 html 代码:

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

我想在用户点击&lt;div&gt;时运行一个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);
&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(); 
);

【讨论】:

以上是关于使用脚本设置 onclick 事件的主要内容,如果未能解决你的问题,请参考以下文章

Matplotlib事件onclick在变量中存储坐标?

java onclick事件

如何从 matplotlib 中的另一个脚本调用 onclick 事件?

如何使用 OnClick 事件设置 Jquery Mobile 导航

使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?

Android:如何在 ListView 的列表项中为 Button 设置 onClick 事件