如何将javascript事件处理程序注册到尚未添加到页面的元素 [英] How do I register a javascript event handler to an element that hasn't been added to the page yet

问题描述

我正在尝试构建一个greasemonkey脚本，该脚本将根据用户与其他动态创建的数据表交互动态创建数据表。我的问题是我每次创建一个表时都要进行两次传递：一个用于创建表，另一个用于获取表中的所有对象我想要添加事件处理程序（通过id）并添加它们的各种事件处理程序。

I'm trying to build a greasemonkey script which will dynamically create tables of data based on user interaction with... other dynamically created tables of data. My problem is that I'm having to make two passes every time I create a table: one to create the table, and another to go grab all of the objects in the table I want to add event handlers to (by id) and add the various event handlers to them.

如果我尝试在创建表并将其插入HTML之前将onClick事件添加到表td ，我得到一个组件不可用的例外。

If I attempt to, say, add an onClick event to a table td before I've created the table and inserted it into the HTML, I get a "component is not available" exception.

这非常麻烦，因为我必须单独维护一个id列表以及当我第二次添加时我应该对这些元素做些什么根据id，我应该根据id知道我应该对元素做什么的处理程序或者开发一个命名约定。

This is incredibly cumbersome, because I either have to maintain, separately, a list of the ids and what I should do to those elements when I make my second pass to add the handlers, or develop a naming convention by which I know, based on the id, what I should do with the element.

这是一个更好的方法这个。我还没弄明白。任何人都有任何想法？

There HAS to be a better way to do this. I just haven't figured it out yet. Anyone have any ideas?

推荐答案

首先，我想知道为什么每个TD都需要不同的ID。 ID是否包含重要信息，例如索引？在这种情况下，在循环中创建每个TD可能会更好。此外，显然您无法将事件处理程序附加到不存在的DOM元素！它不必注入DOM，但它必须以某种身份存在。

Firstly, I'd love to know why you need a different ID for every single TD. Is the ID holding important information, such as an index? In this situation it might be better creating each TD within a loop. Also, obviously you can't attach an event handler to a DOM element which doesn't exist! It doesn't have to be injected into the DOM but it DOES have to exist in some capacity.

jQuery的live（）不是一个神奇的谜，它只是使用它事件委托，因此它将事件附加到父元素（例如表），然后根据单击的目标决定发生的事件。这是一个基本的例子。我将一个处理程序注册到'body'元素，然后我每次测试看看目标是什么，如果它是TD元素我doSomething（） - >

jQuery's live() isn't a magical mystery, it just uses event delegation, so it attaches the event to a parent element, such as the table and then decides what happens dependent on the target of the click. Here's a rudimentary example. I register a handler to the 'body' element, and then I test each time to see what the target is, if it's a TD element I doSomething() ->

document.body.onclick = function(e) {

    var realTarget = e ? e.target : window.event.srcElement;

    if ( realTarget.nodeName.toLowerCase() === 'td' ) {
        doSomething();
    }

};

事件委托依赖于称为事件冒泡（或传播）的东西，这是现代的方式浏览器实现事件模型。触发后，每个事件都会向上移动通过DOM，直到它不再进一步发生。因此，如果您点击段落中的锚点，锚点的点击事件将会触发，然后段落的点击事件将触发等等。

Event delegation relies on something called event bubbling (or "propogation") which is the way in which modern browsers implement the event model. Each event, when triggered will travel upwards through the DOM until it can go no further. So if you click on an anchor within a paragraph the anchor's 'click' event will fire and THEN the paragraph's 'click' event will fire etc. etc.

这篇关于如何将javascript事件处理程序注册到尚未添加到页面的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！