html 在不知道id的情况下动态添加事件监听器

Question

我在构建页面时创建了很多 select 列表（下拉列表）。 下拉菜单基于外部数据文件，所以我在运行时设置了 id。 就像是

<% name="TypeA" + specialIDString %>
<select  id="<%= name %>" >
blah
blah 
</select>

由于我事先不知道 ID，我该如何添加事件侦听器？ 我可以在 DOM 中搜索 ID 中带有“TypeA”的所有 ID，然后为每个 ID 添加一个侦听器吗？

我知道如何在 javascript 中触发 onLoad() 方法，加载页面后，我只想知道如何搜索 DOM 以查找其中包含特定字符串的 ID。 谢谢。

Answer 1

仅作记录，香草 JavaScript 回答：

function getElementsByIdStartsWith( type, idStartsWith ) {
    var arr = [],
        all = document.getElementsByTagName( type );

    for ( var i = 0; i < all.length; i++ ) {
        if ( all[i].id.indexOf( idStartsWith ) === 0 ) {
            arr.push( all[i] );
        }
    }

    return arr;
}

接着：

var selects = getElementsByIdStartsWith('select', 'TypeA');

现在您可以使用 for 循环将处理程序绑定到数组中的每个元素。

Answer 2

如果你使用 jQuery 你可以这样做：

$('select[id^=TypeA]').bind('yourevent', function() {});

Answer 3

您可以内联添加事件侦听器并直接传递元素。

<select onclick="myfunction(this)" id="<%= name %>" >
blah
blah 
</select>

您可以做的另一件事是像这样传递事件属性：

<select onclick="myfunction(event)" id="<%= name %>" >
blah
blah 
</select>

然后在 myfunction 中，event.target 将是触发调用的元素。 您可以使用event.target.id获取 id。

Answer 4

如果您不知道具体的 ID，您可以执行其他操作。

一种选择是使用 class 名称； 另一种选择是在 ID 前面加上 static 和（在 jquery 用语中）您可以使用起始选择器。

<select id="generated<%=name%>">

var mySelect = $('select[id^=generated]');

它会起作用，但它不是最好的做事方式，特别是如果您将拥有多个生成的元素。 它也相对较慢。

按 CSS Class 名称选择可能是最好的方法。

Answer 5

如果您有 jQuery，则使用 jQuery 查询选择器很容易。 但如果不是：

1. 将 class 添加到您的元素：

    <% class="myClass" name="TypeA" + specialIDString %> <select id="<%= name %>" > blah blah </select>

2. 使用getElementsByClassName访问您的元素

   var myElems = document.getElementsByClassName('myClass');

3. 循环元素并添加事件监听器

   for(var i=0; i<myElems.length; i++){ myElems[i].addEventListener('click', function(){}, false); }

我知道 getElementsByClass 名称在 IE6（或 7 也？）中不起作用。 但这是我的解决方案。 也许我可以用 x-browser 解决方案更新它