mavigozler wrote:
Hi,
1. This particular re-coding I have done now attaches method (event
handler/listener) code to each dynamically created SPAN element, so if
as many as hundreds of SPAN elements are attached, I have no idea what
effect this will have on the memory heap (?) or stack (?) of the
browser's host resources.
Instead of defining anonymous functions in the insertSpan function, you
could define two generic handlers outside of the function, and simply
assign references to them. This way, you'd limit the number of functions
to be created.
function mouseoverhandler(evt){/*...*/}
function insertSpan() {
/*...*/
foo.onmouseover=mouseoverHandler;
}
Also, JFTR, ECMAScript permits an implementation to join identical
function objects into a single function object. While the details of
this process are not specified, most clever implementations would
certainly try and join functions where possible (if the only difference
is a matter of scope, then it should be pretty feasible, that's the
principle of closures, working with couples {scope; function pointer}).
However the IE-specific attachEvent() and DOM-defined
addEventListener() methods do not allow the passing of parameters, and
the 'this' keyword to change object properties only works in Firefox and
causes an error in IE7, in the hour-or-so code testing I did.
That is a known IE issue with attachEvent, the "this" value refers to
the global object; instead of using directly the "this" keyword, you
could probably use
evt=evt||window.event;
elem=evt.srcElement||evt.target;
However, not using attachEvent is probably best when you do not have
more than one handlers to add, elem.on<event>=handler suffices. Also,
other patterns exist, still using elem.on<event>=handler, but permitting
many handlers (for instance keeping them into an array and having a
controller execute them, or stacking the handlers with closures).
2. The cloning of nodes, deep (set true) or otherwise, appears to clone
the attributes of those elements in Firefox but NOT in Internet
Explorer.
The situation is more complex than that, browsers' behaviors are simply
not consistent in regards of methods setAttribute and cloneNode, and the
specifications are (IMHO) too blurry to really tell who's right. Anyway,
in the end, only the result matters, so the conclusion is: use these
methods with care (or, better, adopt a safer approach, with other
approaches), after thoughtful testing in your target environments.
Let's discuss this a bit more. If you read the DTD, you'll see that
values for HTML attributes eventually resolve to text values, not
objects. However, using the DOM, we can see that elem.onevent returns a
function, and that elem.style returns an object.
This means that, during the parsing, the text attributes have been
transformed into objects, with a specific process (this process not
being described by any specification I think, though since it's been
years I haven't read them I might be mistaken).
For instance, event attributes would yield event listeners, and style
attributes would transform into an object representing the HTML style
attribute, whose property setting alters the computed style of the object.
In IE, setAttribute does not seem to trigger the process that transform
text values into objects; this means that you cannot use setAttribute to
define event handlers or style values with IE. In Firefox and Opera,
this works, though.
---
<form action=""><textarea rows="30" cols="40"></textarea></form>
<script type="text/javascript">
window.onload=function(evt){
function out(s){
document.forms[0][0].value += s+"\n";
}
// Test 1 - setAttribute
var div=document.createElement("div") ;
div.setAttribute("id", "foo");
div.setAttribute("foo", "bar");
div.setAttribute("style", "background-color:yellow");
div.setAttribute("onclick","alert('click')");
div.appendChild(document.createTextNode("Hello, world!"));
document.body.appendChild(div);
out("Id? " + (document.getElementById("foo")==div));
out("custom foo? " + (div.getAttribute("foo")=="bar"));
out("onclick? " + (typeof div.onclick=="function"));
out("style? " + div.style.backgroundColor);
/*
IE : true, true, false, <empty>
FF : true, true, true, yellow
Opera : true, true, true, #ffff00
Note: if div.foo instead of div.getAttribute(foo),
results differ.
*/
}
</script>
---
Now, suppose that you remove the setAttribute issue, by directly working
with objects (you can even remove the style issue by using a className).
In IE, the cloneNode method clones everything except HTML event handlers
(listeners attached with attachEvent are fine). Firefox and Opera copy
everything, except event listeners (all of them) and expando (custom)
attributes.
---
<form action=""><textarea rows="30" cols="40"></textarea></form>
<script type="text/javascript">
window.onload=function(evt){
function out(s){
document.forms[0][0].value += s+"\n";
}
// Test 2 - cloneNode
var div=document.createElement("div"), copy ;
div.id="foo";
div.foo="bar";
div.obj={hello:"Success"};
div.style.backgroundColor="yellow";
div.onclick=new Function("alert('click!')");
if(div.attachEvent) {
div.attachEvent("onclick", function(){alert('1')});
} else if (div.addEventListener) {
div.addEventListener("click", function(){alert('1')}, false);
}
div.appendChild(document.createTextNode("Hello, world!"));
copy=div.cloneNode(true);
document.body.appendChild(copy);
out("Id? " + (document.getElementById("foo")==copy));
out("custom foo? " + (copy.getAttribute("foo")=="bar"));
out("object value? " + (copy.obj && copy.obj.hello));
out("onclick? " + (typeof copy.onclick=="function"));
out("style? " + (copy.style.backgroundColor));
/*
IE : true, true, success, false, yellow,
FF : true, false, undefined, false, yellow
Opera : true, false, undefined, false, #ffff00
event listeners defined with attachEvent and addEventListener :
IE : copied
FF : not copied
Opera : not copied
*/
}
</script>
---
The
question is whether an event on a specific DOM element is really an
attribute. The HTML 4.01 specificiation clearly indicates that events
(onclick, onmouseXXX, etc) ARE attributes of elements, so in the absence
of any overriding/obsoleting specification, developers of script
interpreters not treating events as element attributes nor copying these
attributes in node cloning are not conforming to the specification.
<URL:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/>
does not, AFAICS, mention the handling of HTML events or style
attributes, which is what matters here.
Regards,
Elegie.
