Question

我需要在脚本内的元素中添加一个onclic事件。我这样做了：

element.onclick=function;

但是我需要使用函数发送一个值，比如

element.onclick=function(value);

但那不起作用。你能帮帮我吗？

Answer 1

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

以下代码段描述了相同的

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

只需创建一个closure：

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

Answer 3

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

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- This disables the black preview screen -->
        <item name="android:windowDisablePreview">true</item>
    </style>

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>

Answer 4

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

click事件通常与用户互动相关联 - 他们点击某些内容并发生其他事情。所以你需要：

定义元素
定义“点击”功能
将该功能与元素
在单击元素时收集要使用和/或传递给脚本其他部分的任何信息。
用这些信息做点什么。

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

示例HTML

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

从底部开始：

向目标元素添加一个事件监听器，以便它可以执行某些操作 - 在这种情况下，只要发生theClickFunction()，它就会触发函数click。
添加允许我们使用JavaScript单击目标元素的函数clickTheDiv()。
添加在单击目标元素时调用的函数theClickFunction()。此函数会自动接收一个“事件”参数（您可以在代码中调用它而不是“事件”，或者通常只是“e”，以提醒您正在处理事件）。您可以将此视为对html - 引发该函数的元素的引用。它允许我们使用内置的target方法收集有关该元素的信息。此处会收集元素的 id 和数据文本属性以及“额外”信息项。然后将其传递给......
...函数getTheData()将对我们收集到的所有内容做一些事情。

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

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

另见：

Answer 5

至少你必须定义将要发生的事情，如果函数（因此点击事件）被调用。

尝试这样的事情：

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

或者你用jQuery创建它：

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

JavaScript通过带参数的脚本添加onclick

5 个答案: