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

html dynamically add event listeners without knowing id

本文关键字：动态 添加 事件 侦听器 情况下 不知道 id HTML      更新时间：2023-09-26

当我构建页面时，我正在创建许多选择列表(下拉列表)。下拉菜单是基于外部数据文件的，所以我在运行时设置id。比如

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

我如何添加事件侦听器，因为我不知道ID提前?我是否可以在DOM中搜索id中包含"TypeA"的所有id，并为每个id添加一个侦听器?

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

只是为了记录，普通的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循环将处理程序绑定到数组中的每个元素。

如果你使用jQuery，你可以这样做:

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

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

<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。

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

一种选择是使用类名;另一种选择是在ID前加上一些静态的东西，(用jquery的说法)你可以使用一个start_with_selector。

<select id="generated<%=name%>">
var mySelect = $('select[id^=generated]');

它将工作，但它不是最好的方式做事情，特别是如果你有多个生成的元素。它也相对较慢。

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

如果你有jQuery它很容易jQuery查询选择器。但如果没有:

  1. 为元素添加一个类:

    <% 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解决方案来更新

相关文章：