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

我在构建页面时创建了很多选择列表（下拉列表）。下拉列表基于外部数据文件，因此我在运行时设置id。差不多

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

废话
废话

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

---

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

如果您使用jQuery，您可以这样做：

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

---

如果使用jQuery，您可以简单地执行以下操作：

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

---

如果你不能明确知道身份证，你可以做其他事情

一种选择是使用类名；另一个选项是在ID前面加上一些静态的东西，并且（用jquery的说法）可以使用带开头的选择器

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

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

var mySelect=$（'select[id^=generated]'）；

它可以工作，但不是最好的方法，尤其是当您有多个生成的元素时。它也相对缓慢

---

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

如果您不能明确知道ID，您还可以做其他事情

一种选择是使用类名；另一个选项是在ID前面加上一些静态的东西，并且（用jquery的说法）可以使用带开头的选择器

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

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

var mySelect=$（'select[id^=generated]'）；

它可以工作，但不是最好的方法，尤其是当您有多个生成的元素时。它也相对缓慢

---

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

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

<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。您可以内联添加事件侦听器并直接传递元素

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

废话
废话

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

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

废话
废话

---

然后在myfunction中，event.target将是触发调用的元素。如果您有jQuery，那么可以使用

event.target.id

获取id，使用jQuery查询选择器很容易。但如果不是：

将类添加到元素中：

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

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

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

---

for（var i=0；i如果您有jQuery，使用jQuery查询选择器很容易。但是如果没有：

将类添加到元素中：

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


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

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

for（var i=0；i仅记录如下：

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;
}

现在，您可以使用for循环将处理程序绑定到数组中的每个元素。
仅针对记录，普通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;
}

现在，您可以使用for循环将处理程序绑定到数组中的每个元素。
您还可以在其中抛出一个类来额外设置这些元素，这比匹配id的一部分更简单。您还可以在其中抛出一个类来额外设置这些元素，这比mat更简单这是id的一部分。好吧，您只需为旧版IE提供
getElementsByClassName
函数的显式定义，所以这不是问题。好吧，您只需为旧版IE提供
getElementsByClassName
函数的显式定义，所以这不是问题。+1为什么香草JavaScript答案只是为了记录？+1-只是一个想法，您可以检查
querySelectorAll
，如果支持，则使用该选项，否则返回到您的解决方案中。+1因为它更快、更简单、更可移植。否则为什么要这样做？如果可用，您还可以包括一个qSA fork:`var nodes=document.querySelector全部（'选择[id^=TypeA]'）我很好奇
getElementsByTagName
+过滤器和
querySelectorAll
之间的性能差异，因为我从
qsa
中看到了一些相对较差的性能。可以肯定的是，在我运行它的两个浏览器中，.Firefox 5对
…TagName
产生了一些非常快的结果eels似乎有点不对劲。@patrick可能是浏览器中的qSA实现在存在类型选择器的情况下使用了getElementsByTagName算法。gEBTN方法肯定“更原始”然后是qSA，所以我想速度更快是可以理解的。然而，Opera中的结果是疯狂的——qSA为270万次/秒？！
：）
+1为什么香草JavaScript的答案只是记录在案？+1-这只是一个想法，你可以检查
querySelectorAll
，如果它被支持，那么就使用它，否则就退回到你的解决方案中去。+1因为它更快、更简单、更可移植。否则你为什么要这样做？如果可用，你还可以包括一个qSA forkle:`var nodes=document.querySelectorAll（'select[id^=TypeA]'））我很好奇
getElementsByTagName
+过滤器和
querySelectorAll
之间的性能差异，因为我从
qsa
中看到了一些相对较差的性能。可以肯定的是，在我运行它的两个浏览器中，.Firefox 5对
…TagName
产生了一些非常快的结果eels似乎有点不对劲。@patrick可能是浏览器中的qSA实现在存在类型选择器的情况下使用了getElementsByTagName算法。gEBTN方法肯定“更原始”然后是qSA，所以我想速度更快是可以理解的。然而，Opera中的结果是疯狂的——qSA为270万次/秒？！
：）
+1因为我不相信不引人注目的