DOM compatibility problem
Jeff Schmidt
URI: http://weldingconsultants.com/dhtml/simple1.html
This page is a fairly simple page, built almost entirely in javascript,
using DOM methods to create elements and populate the tree. One of the nodes
of the tree is a button, whose onClick event is supposed to trigger a
function, which uses DOM methods to removeChild() the lastChild and
insertBefore() the firstChild (removeChild and insertBefore are triggered
from an object representing the 'body' element of the html document), to
create a dynamic 'rotation' effect, where the last element of the page
*should* get removed and inserted at the top, and all the other elements move
down.
This page actually works in Mozilla Firefox, and I believe it should also
work in IE, as I looked at the MSDN documentation, and all the methods I use
are reported by MSDN as being supported in IE.
Can anyone help me understand why this is not working as intended? I suspect
that Internet Explorer isn't correctly handling the
button.setAttribute("onClick", "rotate();") statement. That is, I don't think
that the onClick event is actually being associated with the button correctly
from the javascript.
Jeff Schmidt
setAttribute("onclick", "rotate();") on the button object inside my
javascript, the event handler was not being registered into IE. I created a
modified copy of the html page, and the javascript file, which created the
button as part of the html file statically, instead of using DOM methods to
create it.
The new version is available at:
http://weldingconsultants.com/dhtml/simple2.html
This version now works correctly. So, it appears that you can't use
setAttribute to register javascript Event handlers in Internet Explorer. Is
this a bug that should be reported to Microsoft? Or, is there another way
that is normally used, to allow you to set event handlers for completely
dynamic objects in the document tree?
Lasse Reichstein Nielsen
> Can anyone help me understand why this is not working as intended? I
> suspect that Internet Explorer isn't correctly handling the
> button.setAttribute("onClick", "rotate();") statement. That is, I
> don't think that the onClick event is actually being associated with
> the button correctly from the javascript.
If you enter "javascript:rotate()" in the command line, it shows that
the function works., so your suggestion sounds plausible.
There is a mapping between HTML attributes and DOM element properties,
where attributes are turned into properties when the page is
loaded. It appears that this doesn't happen when the HTML attribute is
assigned later.
In this case, the HTML attribute "onclick" and the DOM element
property "onclick" are quite different beasts. The first contains
text, the latter is a function (just as the HTML attribute "style" and
the similarly named DOM property are quite different in nature).
After the page has been parsed, your script has access to the DOM
properties directly, so you should use these. Just do:
button.onclick = rotate;
(quick test, enter:
javascript:void(document.all.tags("input")[0].onclick = rotate)
in the address field)
/L
--
Lasse Reichstein Nielsen - l...@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Joe Fawcett
news:8A611CD0-8C41-43C1...@microsoft.com...
button.setAttribute("onclick", rotate);
or button.onclick = rotate;
should work.
--
Joe (MVP)
https://mvp.support.microsoft.com/profile=8AA9D5F5-E1C2-44C7-BCE8-8741D22D17A5
Lasse Reichstein Nielsen
[setting event handlers on DOM objects]
> Or, is there another way that is normally used, to allow you to set
> event handlers for completely dynamic objects in the document tree?
The official (W3C DOM) method is "addEventListener"
inputElement.addEventListener("click", rotate, false);
Sadly, IE doesn't support that. Instead you can use the proprietary
"attachEvent"
inputElement.attachEvent("onclick", rotate);
The original method was simply assigning directly to the "onclick"
property of the DOM element:
inputElement.onclick = rotate;
It has the disadvantage of not allowing more than one handler to be
added at a time. The advantage is that it works in pretty much any
browser, even the older Netscape versions.
Jim Ley
"Joe Fawcett" <joefa...@newsgroups.nospam> wrote in message
news:ummMNGWM...@TK2MSFTNGP14.phx.gbl...
> "Jeff Schmidt" <JeffS...@discussions.microsoft.com> wrote in message I
> button.setAttribute("onclick", rotate);
this doesn't in IE, and it's not documented anywhere, including in any
standard that it should...
Jim.
Jeff Schmidt
files, making the change to button.onclick = rotate; and that works just fine
in both IE and FireFox. I don't know for sure if it works in any other
browsers, but I suspect if it works in both of those, it works in Safari,
Opera, Konqueror, etc.
One thing I'm curious about - it appears to me that the event properties are
not actually part of the DOM specifications. That is, if I'm trying to stick
to a strict W3C DOM approach to manipulating documents, there are no
properties defined in the specifications for, e.g., onclick, onmouseover,
etc, etc. That appears to be something that the browsers *do*, but it's not
actually part of the spec, it appears to me?
Digging through the W3C specs, the only 2 formal mechanisms I could find for
dealing with capturing events, would be the aforementioned setAttribute()
method, and the .addEventListener() method from DOM Level 2 Events (which I
don't think IE implements).
*sigh* This is why I hate web development. In theory, it's not so bad, in
practice, the lack of actual implementations of the standards makes it
difficult to do anything the *RIGHT* way. . .
Well, anyhow, thank you for your time. You have been a great help.
Joe Fawcett
news:uLgeWNWM...@TK2MSFTNGP10.phx.gbl...
<head>
<title>Add Event</title>
<script type="text/javascript">
function addEvent()
{
var oButton = document.getElementById("cmdTest");
oButton.setAttribute("onclick", showMessage);
}
function showMessage()
{
alert("Hello");
}
</script>
</head>
<body>
<input type="button" value="Click Me" id="cmdTest"><br>
<input type="button" value="Add Event" onclick="addEvent();">
</body>
</html>
I await your apology :)
Jim Ley
"Joe Fawcett" <joefa...@newsgroups.nospam> wrote in message
> oButton.setAttribute("onclick", showMessage);
Sorry, I did indeed miss that you'd passed a function reference as the 2nd
parameter to setAttribute, I read it as a string. and it does indeed work,
but that is far completely non-standard! I highly recommend not using it.
Jim.
Joe Fawcett
IE, I recently changed jobs and now have to write cross browser code which, as
you know, is a nightmare.
I noticed in some Micrsoft code, which was written for a DHTML behaviour, so
definitely IE only the following:
var o = new Object();
oElement.setAttribute("myAtt", o); //oElement pointed to newly created
element.
They then added a lod of properties to the object which were used later.
So it appears an attribute can hold anything you like.
I find event management very annoying, Microsoft have their non standard methods
but to be fair they had this from quite some time back.
I suppose it's too much to hope that with the release of IE 7 they'll allow the
W3C methods etc :)
Regards