Question

我想为多个按钮动态创建事件监听器，然后根据点击的按钮显示特定的帧标签，但我不确定要通过什么（仅供参考，这将用于HTML5画布在Flash CC中，但主要应该同样适用于显示div等的网页）。我目前有这个：

var butTotal = 4;
var selfHome = this;

function createListeners () {
    for (var i=0; i<butTotal; i++) {
        selfHome["btn" + i].addEventListener('click', openPop);
    }
}

function openPop () {
    alert("test");
    selfHome.gotoAndPlay("pop"+event.currentTarget.name.substr(3));
}

createListeners();

它创建了很好的侦听器，但我真的不知道从哪里开始，通过当前按钮实例名称告诉它哪个帧标签为gotoAndPlay。

Answer 1

根据您拥有的代码，我只需将.addEventListener()更改为直接调用泛型函数（而不是openPop），并将引用传递给按钮。所以，这个：

selfHome["btn" + i].addEventListener('click', openPop);

。。。会变成这样：

selfHome["btn" + i].addEventListener('click', function() {
    openPop(this);
});

此时，您必须更新openPop以接受参数以引用触发它的元素。。。类似的东西：

function openPop (currentButton) {

此时，您可以使用currentButton逻辑中的openPop来引用点击的按钮。

Answer 2

我不确定我完全理解你的问题。但是，如果您只需要传递按钮实例（在您的情况下为“selfHome [”btn“+ i]”），您可以在事件处理程序中调用匿名函数，该函数使用按钮实例作为arugment调用openPop（）。这对你有用吗？

var butTotal = 4;
var selfHome = this;

function createListeners () {
    for (var i=0; i<butTotal; i++) {
         var currentBtn = selfHome["btn" + i];
        currentBtn.addEventListener('click', function(){openPop(currentBtn);} );

    }
}

function openPop (btn) {
    alert("test");
    selfHome.gotoAndPlay(/*use button instance 'btn' to find frame*/);    
}
createListeners();

Answer 3

当触发事件时，处理函数内的this关键字被设置为元素触发事件EventTarget.addEventListener on MDN。如果按钮具有需要检索的数据，只需从this关键字获取它：

function openPop (btn) {
    alert(this.name);
    /* ... */
}

Answer 4

看起来你希望它包含函数gotoAndPlay（）以及btn元素（它们包含一个ID（btn [number]）和一个特殊的substr(3)名称（我假设与id相同。如果这些都是真的，它应该在chrome中工作...在其他浏览器中，您需要将event添加到openPop()方法签名。

function openPop (event) {
    alert("test");
    selfHome.gotoAndPlay("pop"+event.currentTarget.name.substr(3));
}

我相信这就是你要找的东西，并补充一句话应该解决你的问题（假设你的dom和selfHome包含的内容）：

JSFiddle

您也可以忽略event中的openPop()并将event.currentTarget替换为this：

function openPop () {
    alert("test");
    selfHome.gotoAndPlay("pop"+this.name.substr(3));
}

JSFiddle

通过当前目标名称来运行

4 个答案: