如何获取动态生成元素的 id 属性？答案

【问题标题】：How to get the id attribute of a dynamically-generated element?如何获取动态生成元素的 id 属性？
【发布时间】：2012-10-19 11:20:20
【问题描述】：

当您不知道它是id 时，如何获取动态生成元素的id 属性？我想在一个页面上为大约 2000 个复选框设置一些 eventListeners。

我知道我可以从元素中调用函数：

<input type="checkbox" id="{databaseResult.Value}" onclick="someFunction(this)" />

但我不允许在我的 HTML 中使用 JavaScript 或对它的引用。纯 JavaScript（或编译成它的语言）是我唯一的选择。

对于我确实知道id的某些元素，我已经拥有的代码是：

var tb = <HTMLInputElement>document.getElementById("tbox");

if(tb.addEventListener("", function (e) {
    sayHello(tb.value);
}, false));

【问题讨论】：

你知道它在 DOM 中相对于你知道 ID 的元素的位置吗？
如果您只想选择 2000 个框来绑定事件，您可以使用 $('[type=checkbox]') 来选择所有 2000 个框。参考：api.jquery.com/checkbox-selector
将您的事件处理程序绑定到父元素并使用event.target||event.srcElement。有了 2000 个复选框，委托事件处理肯定是一个更好的方法。
我知道它在 a Grid 控件中，但我不知道它在哪一个。
@keithxm23：是的，在理想的世界里，我可以使用 jQuery。

标签： javascript html typescript

【解决方案1】：

在祖先元素上放置一个监听器，比如主体，并监听其上的事件，例如：

<body onclick="handleClick(event);" ...>

功能是：

function handleClick(evt) {
  var el = evt.target || evt.srcElement;

  if (el && el.type == 'checkbox') {
    alert(el.id);
  }
}

当然你可以动态添加监听器，为了方便我使用了inline。

编辑

要动态附加监听器，请使用addEvent 函数来处理 IE 和 W3C 事件模型：

function addEvent(el, evt, fn) {

  // W3C event model
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);

  // IE event model
  // Set this and pass event as first parameter
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, (function(el, fn) {
        return function() {fn.call(el, window.event);};
      })(el, fn)
    );
  }

  // Prevent circular reference
  el = null;
}

并将其称为：

window.onload = function() {
  addEvent(document.body, 'click', handleClick);
}

【讨论】：

嗯...所以，文档主体上的侦听器将返回触发事件的任何子元素？
否，侦听器传递相关的event 对象，该对象具有引用事件所在元素的target 属性（W3C 事件模型）或srcElement 属性（IE 事件模型）已派出。
这个解决方案效果很好。我想补充一点，对于 TypeScript 用户，如果你得到红色波浪线，将 addEvent(el 更改为 addEvent(el: any 可以摆脱它们。 :-)