Javascript - 使用 onclick 的函数？答案

【问题标题】：Javascript - Function to use onclick?Javascript - 使用 onclick 的函数？
【发布时间】：2013-12-14 12:22:30
【问题描述】：

我想创建一个函数，然后使用onclick方法，例如：

one = document.getElementById("oneID");

那么不要为每个onclick():编写函数

one.onclick = function(x) {
     tempStack.push(parseFloat(one.value));
     viewTemp.value += one.value;
}

我想使用一个函数：

one.click = input(one);

但我不确定如何以正确的方式进行操作，例如以下我尝试过的方法，但不起作用：

var input = function(x) {
        tempStack.push(parseFloat(x.value));
        viewTemp.value += x.value;
}

最后，没有外部 JavaScript 库可以帮助解决这个问题，vanilla JavaScript。

【问题讨论】：

Javascript .onclick = functionName passing parameters的可能重复
在每个 HTML 元素的 onClick 事件上调用单个方法不是更好吗？
@user3102101 如果适合您的需要，请接受答案。每一个的左边都有一个刻度线。
@user3102101 但你可以接受任何代表的答案 =)

标签： javascript html onclick

【解决方案1】：

你需要传递一个函数作为引用，而不是调用它：

one.onclick = input;

在这种情况下，您将无法传递参数，但您可以使用 this 作为触发事件的 DOM 元素的引用：

function input() {
    tempStack.push(parseFloat(this.value));
    viewTemp.value += this.value;
}

【讨论】：

【解决方案2】：

这是一种使用 JavaScript 的 .addEventListener() 的方法，正如前面提到的答案，使用 this 传递 DOM 节点元素以在 inputFunction 中使用。

<input type="text" value="64.23" id="bt" />

<script>
     function inputFunction( x ) {
         console.log( x.value ); //Console Logs 64.23
     }

     var bt = document.getElementById("bt");
     bt.addEventListener( 'click', function(){ inputFunction( this )}, false );
</script>

小提琴：http://jsfiddle.net/Lhq6t/

【讨论】：

【解决方案3】：

把函数想象成一个普通的对象，那么方法是：

function input (event) {
   // Process the event...

   // event is my event object
   // this is the object which trigger the event
   // event.target is my button
}

on.onclick = input;

您必须将input 函数分配为普通变量。

函数input 将接收一个事件对象作为参数。也可以参考this点击的按钮。

也许mozilla developer network 或the real w3c site 会更好地解释它。

【讨论】：

W3Schools 是一个糟糕的、经常出错、经常过时的教程/参考网站，并且与 W3C 完全没有关联。
我会接受的，谢谢^^。也许您可以向我们推荐另一个参考网站？
一般情况下，this 实际上并不是点击的对象。它是触发事件的对象。 event.target 是点击的对象。（它们可能不同，因为元素（虽然不是<input>，大概 input 是）可以有后代。

【解决方案4】：

您的要求可以通过以下方式实现：

在你的脚本标签中添加这个方法：

function input(x) {
    /*tempStack.push(parseFloat(x.value));
    viewTemp.value += x.value;*/

    alert(x.id);       
}

然后在按钮/锚点的 onClick 事件中调用此方法，例如：

<input type="button" id="oneID" value="oneID" onClick="input(this);"/>
<input type="button" id="twoID" value="twoID" onClick="input(this);"/>
<a href="#" id="threeID" onClick="input(this);">threeID</a>

查看工作示例：http://jsfiddle.net/Avd5U/1/

【讨论】：

您是通过 javascript 添加 onClick 事件，直接将它们添加到您的标签中。

【解决方案5】：

好的，所以只需创建一个带有参数的函数，例如：

function setValue(input){
    tempStack.push(parseFloat(input.value));
    viewTemp.value += input.value;
}

然后在单击该元素时调用该函数，例如：

var one = document.getElementById("oneID");
one.click = setValue(one);

祝你好运！

【讨论】：

除了重命名功能，你有什么改变？