JavaScript 从脚本添加 onclick with paramenter

当你做function()时，它会调用函数。如果要将值传递给函数赋值，则应使用 .bind(context, arguments) 。

以下片段描述了相同的内容

var value = 10;
document.getElementById("btn").onclick = notify.bind(null, value);
function notify(value){
  alert(value);
  value++
}

<button id="btn">test</button>

正如@Dmitri Pavlutin所指出的，这里它将是一个静态绑定。如果值发生更改，则不会反映在事件调用中。

只需创建一个闭包：

var value = 1;
element.onclick = function() {
  myHandler(value);
};

即使不使用任何库，您也可以通过多种方式实现此目的。其中之一是使用您必须在元素上设置的属性。

var el = document.getElementById('click');
el.addEventListener('click', function() {
		var msg = this.getAttribute('data-attr');
		alert(msg);
})

#click {
  height: 100px;
  width: 200px;
}

<div id="click" data-attr="data"> 
  Click me
</div>

另一种可能有效的方法实际上是使用闭包：

document.getElementById("btn").onclick = notify("Passed");
function notify(value){
  return function() {
    alert(value);
  }
}

这里似乎有点令人困惑，所以我将为那些仍在掌握事件的人添加更一般的评论。

click事件通常与用户交互相关联 - 他们单击某些内容并发生其他事件。因此，您需要：

1. 定义元素
2. 定义"点击"函数
3. 将函数与元素关联
4. 收集单击元素时要使用的和/或传递给脚本其他部分的任何信息。
5. 对这些信息做点什么。

如果您希望提供一种允许脚本单击目标元素而不是用户的方法，那么此示例可能会有所帮助：

示例网页

<div id="click-div" data-text="Hello World">
   <!-- ...content... -->
</div>

示例 JavaScript

function getTheData(arg1, arg2, arg3) {
    /* function called by 'theClickFunction()' 
       arg1 (= 'click-div')
       arg2 (= 'Hello World')
       arg3 (= '123.45) */
}
function theClickFunction(event) {
   /* this function is called whenever
       the target element is clicked - either 
       by a user or by JavaScript */
   var divID = event.target.id; /* 'click-div' */
   var hello = event.target.getAttribute('data-text'); /* "Hello World" */
   var extra = 123.45;
   getTheData(divID, hello, extra);
}
function clickTheDiv() {
   /* this function clicks the element 
      from this JavaScript instead of
      a user */
   var cDiv = document.getElementById('click-div');
   cDiv.click(); /* <-- element clicked! */
}
window.onload = function() {
   /* add event listener to the target
      element when the page has loaded */
   var targetElem = document.getElementById('click-div');
   targetElem.addEventListener(
      'click', theClickFunction, false
   );
};

从底部开始：

将
1. 事件侦听器添加到目标元素，以便它执行某些操作 - 在这种情况下，每当发生click时，它将触发函数theClickFunction()。
2. 添加函数clickTheDiv()，这将允许我们使用 JavaScript 单击目标元素。
3. 添加函数theClickFunction()，每当单击目标元素时都会调用该函数。 此函数会自动接收一个"event"参数（您可以在代码中随意调用它，但"event"或通常只是"e"会提醒您正在处理事件）。 您可以将其视为对触发函数的 html 元素的引用。 它允许我们使用内置的target方法收集有关该元素的信息。 在这里，元素的 id 和数据文本属性与"额外"信息项一起收集。 然后将其传递给...
4. 。该函数getTheData()它将对我们收集的所有东西做一些事情。

每当用户单击<div id="click-div">时，都会调用该函数theClickFunction。 我们可以通过在脚本中的其他地方添加简单的函数调用clickTheDiv();来为他们调用该函数。

当然，所有这些都可以压缩，而不必完全像这样构建。 我在这里这样做只是为了更清楚地了解正在发生的事情。

另请参阅：

• 怪癖 - 简介事件
• MDN - Event.target
• MDN - 事件参考
• W3C - DOM 事件规范

好吧，至少你必须定义如果调用函数（所以点击事件）会发生什么。

尝试这样的事情：

element.onclick= function()
{
    //Your event here
    console.log("hey there");
}

或者你用jQuery来做：

$(yourElement).click(function(e)
{
    //Your event here
    console.log("hey there");
});