元素引用在修改容器的innerHTML属性时会中断 [英] Element reference breaks on modification of innerHTML property of container
问题描述
当通过代码创建元素时，我遇到一个问题，即修改元素的 innerHTML 属性会将引用到其他元素的引用打破到修改后的元素之前修改。
我在这里有一个测试案例： http ：//jsfiddle.net/mJ7bF/1/ ，其中我希望 link1 引用的行为与 link2 。
第二个测试用例是相同的代码，而不是使用 innerHTML 属性要添加< br> 标签，我用一个对象创建换行符。此测试的行为与预期的一样： http://jsfiddle.net/K4c9a/2/
我的问题不在于这个特定的代码，而是其背后的概念：在第一个测试用例中 link1 引用了什么？如果没有将 cont 节点注入到文档中时可以看到的HTML / DOM节点，那么它所指的是什么，它如何适用于使用JavaScript对象的ByReference属性？
这里有几件事情。
首先。字符串是不可变的，因此执行 element.innerHTML + =< br>充当完整的读取和重写。
第二，为什么这是坏的：除了性能之外，mootools（和jquery，为此）为所有引用的元素分配了特殊的唯一序列uid，除此之外，
。您可以通过调用一个选择器或创建它来引用元素。
然后考虑具有 uid 的SPECIFIC元素说5. uid 链接到一个名为 Storage 的特殊对象，它位于一个闭包（因此它的私有）之后。它有 uid 作为关键。
元素存储然后在 element.store（key，value）上工作和 element.retrieve（key）
最后，为什么这么重要：事件存储到元素存储（例如，Storage [5] ['events']） - 做element.retrieve（事件），并在fireBug中探索，如果你好奇。
当您重写innerHTML时，旧元素停止存在，然后重新创建它，但事件处理程序和对先前绑定的函数的引用将不再工作，因为它将获得新的 uid 。
这是关于它，希望是有道理的。
添加一个br只是做新的元素（br）。注入（元素）替代或创建一个模板片段的批次（最快），并添加1个大块，添加事件。
When creating elements via code, I have encountered an issue where modifying the innerHTML property of an element breaks any references to other elements that are injected into the modified element prior to the modification.
I have a test case here: http://jsfiddle.net/mJ7bF/1/ in which I would expect the link1 reference to behave exactly as link2 does.
This second test case is the same code, but instead of using the innerHTML property to add the <br> tag, I create the line break with an object. This test behaves as expected: http://jsfiddle.net/K4c9a/2/
My question is not regarding this specific code, but the concept behind it: what happens to the link1 reference in that first test case? If it doesn't refer to the HTML/DOM node that is visible when the cont node is injected into the document, what DOES it refer to, and how does this fit in with the ByReference nature of javascript objects?
few things here.
first of all. strings are immutable hence doing element.innerHTML += "<br>" acts as a complete read and rewrite.
second, why that is bad:
aside from performance, mootools (and jquery, for that matter) assigns special unique sequential uids to all referenced elements. you reference an element by calling a selector on it or creating it etc.
then consider that SPECIFIC element with uid say 5. the uid is linked to a special object called Storage that sits behind a closure (so its private). it has the uid as key.
element storage then works on a element.store("key", value") and element.retrieve("key")
and finally, why that matters: events are stored into element storage (eg, Storage[5]['events']) - do element.retrieve("events") and explore that in fireBug if you're curious.
when you rewrite the innerHTML the old element stops existing. it is then recreated but the event handler AND the reference to the function that you bound earlier will no longer work as it will now get a NEW uid.
that's about it, hope it makes sense.
to add a br just do new Element("br").inject(element) instead or create a templated fragment for the lot (fastest) and add in 1 big chunk, adding events after.
这篇关于元素引用在修改容器的innerHTML属性时会中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
