在 JS 中使用通配符搜索数组答案

【问题标题】：Using Wildcards to Search Arrays in JS在 JS 中使用通配符搜索数组
【发布时间】：2014-10-08 18:37:47
【问题描述】：

我想知道是否可以创建一个元素数组，然后使用通配符创建一个事件侦听器，该通配符将在与任何这些元素交互时触发。这可能是什么样子的示例：

var e = new Array();
e[1] = document.getElementById('some-element');
e[2] = document.getElementById('some-other-element');

e.onmouseup = function() {
  if(e == e[1]) {
    //Some code here
  } else if (e == e[2]) {
    //Some code here
  } 
}

【问题讨论】：

使用addEventListener方法代替元素属性(onmouseup)
@hindmost：我不知道数组支持addEventListener。
@Felix Kling 不需要这样的支持。只需遍历元素数组并应用addEventListener
@hindmost：这在你的第一条评论中并不清楚。
@Felix Kling 是的，但这只是一个说明，而不是解决方案

标签： javascript arrays wildcard elements

【解决方案1】：

不是真正的wildcard，而是允许您为所有元素仅绑定一个事件处理程序的东西 - 事件委托：

document.body.addEventListener('mouseup', function (event) {
    var target = event.target;
    if (target == e[1]) {
        //Some code here
        alert('some-element');
    } else if (target == e[2]) {
        //Some code here
        alert('some-other-element');
    }
}, false);

之所以有效，是因为事件在 DOM 树中冒泡，直到到达检测到它的body，并从那里分派必要的操作。

这是一个使用这种方法的演示：http://jsfiddle.net/jwoxnn3d/

【讨论】：

【解决方案2】：

我不确定您所说的“通配符”是什么意思，但简短的回答是：不，不是。

您必须遍历数组并将处理程序绑定到每个元素。在处理程序内部，您可以使用this 来引用处理程序绑定到的元素。

【讨论】：