Question

我制作了一款涉及蓝精灵和毒蕈的小游戏。我已经能够做到这一点了。 [不能做直接图片：/ Reputation = 6] http://gyazo.com/e9cab4b04e6735712cf67e69c689fb7b

白色/红色和白色/蓝色圆圈中的每一个都是它自己的单独div中的按钮。我现在要做的是＆＃34;附加＆＃34;每个按钮都有一个clickEvent处理程序，这样无论何时按下按钮，图像都会切换为空白或红色和白色。

使用以下代码创建按钮：

    var circle = document.createElement('button');
    column.appendChild(circle);

并且每个按钮都有自己的ID。

那么有没有简单易用的方法让每个按钮响应上面提到的点击？

我稍后需要的数据最重要的是点击按钮的ID。因为它的id引用了它所属的行和列。

Answer 1

由于您使用的是jQuery，我会这样做：

var circle = document.createElement('button');
circle.className = "nameOfTheClass";
column.appendChild(circle);

然后jQuery绑定类nameOfTheClass的每个对象上的click事件：

$('.nameOfTheClass').click(function(){
     alert( $(this).attr('id') );
});

PS：您也可以使用jquery来创建dom元素，但是因为您只询问了如何绑定它..

Answer 2

通过将点击事件添加到按钮的父级而非每个按钮，您可以更轻松地完成此操作，如下所示：

column.addEventListener("click",function(event){
    var target=event.target,id=target.id;
    if(target.nodeName.toLowerCase()=="button"){
        // do stuff ...
    }
},0);

这样您就不必担心以后在脚本中添加到column元素的按钮了。

Answer 3

事件触发功能可以使用addEventListener()方法通过 javascript 附加到元素。
所述方法的语法如下：

element.addEventListener(event, function, useCapture);

例如，在您的情况下：

circle.addEventListener("click", myFunction);

上面的代码显然需要先前定义函数myFunction()，但是，函数也可以在方法本身中定义：

circle.addEventListener("click", function(){
    //your function
});

您可以详细了解此方法here。

Answer 4

如果你正在尝试使用普通javascript

circle.addEventListener("click", function(){
    /* your code here */
});

或者如果您打算使用Jquery，请使用

$('button').on('click', function(){
 /*your code here*/ 
});

请注意，这将适用于页面的所有按钮。如果您想将其用于特定按钮，则可以使用id或class。

希望这会有所帮助。

通过JavaScript / JQuery / Bootstrap将ClickEvent附加到按钮

4 个答案: