Question

我无法弄清楚这一点。我正在尝试纯粹在Javascript中创建一个onclick处理程序。

我打算在这里做的是在这个DIV里面，有一些我可以点击的项目。目前，这些项目将是0到9之间的数字。单击某个数字时，屏幕上将弹出仅包含该数字的系统消息。我将我的问题缩小到只是onclick处理程序定义。

如果我使用这种格式：

    item[n].onclick=function(n){
       handler(n);
    }

只有在单击正确的数字时才会触发处理程序，但出现的消息与鼠标事件有关。

如果我使用这种格式：

    item[n].onclick=function(){
       handler(n);
    }

处理程序将传递值-1，而值-1又作为消息打印。我认为这意味着“虚假”。

我该如何修改：

    item[n].onclick=function(){
       handler(n);
    }

以便'n'用作处理程序参数与我在屏幕上点击的数字相同？

我的代码如下：

<div ID="Itemset"></div>

function handler(n){
    alert(n);
}

collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
    item[n]=document.createElement('DIV');
    item[n].innerHTML=n;
    collections.appendChild(item[n]);
    item[n].onclick=function(n){
       handler(n);
    }
}

如果你想理解它，我有效地尝试做的事情就是这样：

<div ID="Itemset">
<div onclick="handler(0);">0</div>
<div onclick="handler(1);">1</div>
<div onclick="handler(2);">2</div>
<div onclick="handler(3);">3</div>
<div onclick="handler(4);">4</div>
<div onclick="handler(5);">5</div>
<div onclick="handler(6);">6</div>
<div onclick="handler(7);">7</div>
<div onclick="handler(8);">8</div>
<div onclick="handler(9);">9</div>
</div>

除了我不想写出onclick="handler(n);"一百万次。

有什么建议吗？并且可以随意指向另一个具有我需要的答案的资源（如果有的话）。

更新

我正在寻找与旧浏览器兼容的东西。我将不得不去绑定功能，因为根据mozilla文档，它适用于IE 9+。我正在寻找适用于IE 7+以及其他浏览器的东西。如果没有其他选择，我可能不得不去找事件听众。

Answer 1

这里有一个闭包问题（参见JavaScript closure inside loops – simple practical example），一个简单的解决方案是使用bind来使用n的当前值作为处理函数的参数

item[n].onclick=handler.bind(item[n],n);

Answer 2

你可以使用addEventListener和ID来查找被点击的元素......

 document.getElementById("Itemset").addEventListener("click", function(e) {
        // e.target is the clicked element!
        // If it was a list item
        var value_data = parseInt(e.target.textContent);
        if(e.target && value_data > -1) {
            alert("Malai test:: "+value_data);
                        //handler(value_data);
        }
    });

https://jsfiddle.net/malai/tydfx0az/

Answer 3

我在这里找到了答案：https://bytes.com/topic/javascript/answers/652914-how-pass-parameter-using-dom-onclick-function-event

而不是：

item[n].onclick=function(n){
   handler(n);
}

我必须这样做：

item[n].onclick=new Function('handler('+n+')');

有趣的是，在创建新实例时，函数一词需要大写。它很尴尬我必须走这条路线，但它适用于IE 7 +

Answer 4

另一种选择是：

function handler(){
    alert(this.id);
}
function myFunction() {

    var item=[];

    collections=document.getElementById('Itemset');
    for(n=0;n<10;n++){
        item[n]=document.createElement('DIV');
        item[n].innerHTML=n;
        item[n].setAttribute("id","itemset"+n);
        collections.appendChild(item[n]);
        item[n].onclick=handler;
    }
}

向元素插入动态ID，当您单击任何元素时，使用this.id检索其id，并执行您想要对该值执行的任何操作。

就是这样。

希望这有帮助。

将参数传递给javascript onclick而不使用HTML

4 个答案: