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

Question

当我构建页面时，我正在创建大量选择列表（下拉列表）。下拉列表基于外部数据文件，因此我在运行时设置 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，您还可以采取其他措施。

一种选择是使用类名；另一种选择是在 ID 前面添加一些静态内容（用 jquery 的说法），您可以使用开头选择器。

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

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

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

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

Answer 5

如果你有 jQuery，那么使用 jQuery 查询选择器就很容易了。但如果没有：

1. 向您的元素添加一个类：

   <% class="myClass" name="TypeA" +specialIDString %>
   <选择 id="<%= 姓名 %>" >
       废话
       废话 
   
   

2. 使用 getElementsByClassName 访问您的元素

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

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

   for(var i=0; i

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