Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

addEventListener function in IE9 Beta

69 views
Skip to first unread message

Bwig Zomberi

unread,
Oct 20, 2010, 12:26:14 AM10/20/10
to
Hi Group,

Does IE9 support addEventListener? Does IE's attachevent method have
parameters similar to addEventListener?

http://msdn.microsoft.com/en-us/ie/ff468705.aspx

The above MSDN page "Internet Explorer 9 Beta Guide for Developers"
does mention that addEventListener is supported but I can't get it to work.

All non-IE browsers work with the following code.

<html>
<head>
<title>HTML Course</title>

<style>
ul.LinkedList { display: block; }
ul.LinkedList ul { display: none; }
ul.LinkedList ul ul { display: none; }
ul.LinkedList ul ul ul { display: none; }
ul.LinkedList ul ul ul ul { display: none; }
ul.LinkedList ul ul ul ul ul { display: none; }
</style>

<script type="text/JavaScript">

function toggleChildNodes(event) {
var i, cChildren, n;
cChildren = event.target.childNodes;
n = cChildren.length;
for (i = 0; i < n; i++) {
if (cChildren[i].style != undefined) {
if (cChildren[i].style.display != "block") {
cChildren[i].style.display = "block";
cChildren[i].style.cursor = "default";
cChildren[i].parentNode.style.cursor = "pointer";
} else {
cChildren[i].style.display = "none";
}
}
}
return(true);
}


function addToggleTrickToListItems(oList) {
var i, n;

for (i = 0, n = oList.childNodes.length; i < n; i++) {
oList.childNodes[i].addEventListener("click", toggleChildNodes, false);
}
}


function activateDeepNodes(oList) {
var i, n, cListItems;
var j, o, cChildNodes;

for (i = 0, cListItems = oList.getElementsByTagName("li"), n =
cListItems.length;
i < n;
i++) {
cChildNodes = cListItems[i].getElementsByTagName("ul");
if (cChildNodes.length > 0) {
cListItems[i].style.cursor = "pointer";
cListItems[i].style.fontWeight = "bold";
cListItems[i].style.color = "blue";
for (j = 0, o = cChildNodes.length; j < o; j++) {
activateDeepNodes(cChildNodes[j]);
}
} else {
cListItems[i].style.cursor = "auto";
cListItems[i].style.fontWeight = "normal";
cListItems[i].style.color = "black";
}
}
}


function addEventListeners() {
var oTree;
oTree = document.getElementById("LinkedList1");
addToggleTrickToListItems(oTree);

activateDeepNodes(oTree);
}

</script>
</head>
<body onload="addEventListeners();">


<ul id="LinkedList1" class="LinkedList">
<li>History of WWW
<ul>
<li>Arpanet - Packets - 1969</li>
<li>TCP/IP - Vinton Cerf - 1974</li>
<li>WorldWideWeb (Internet and program) - Tim Berners Lee - 1991</li>
<li>Public Domain WWW source code - 1993</li>
<li>NCSA Mosaic released - 1993</li>
<li>Opera released - 1994</li>
<li>Marc Anderseen (formerly NCSA) and Jim Clark release
Netscape - 1994</li>
<li>IE from Microsoft (based on Mosaic)
<ul>
<li>DHTML</li>
<li>ActiveX</li>
</ul>
</li>
<li>W3C at MIT (CERN, NCSA, EU)</li>
<li>W3C Recommendations</li>
<li>Mozilla Foundation</li>
</ul>
</li>
<li>HTML4 page structure
<ul>
<li>Comments</li>
<li>Tags
<ul>
<li>Head
<ul>
<li>title</li>
<li>meta</li>
<li>link</li>
<li>script</li>
</ul>
</li>
<li>Body
<ul>
<li>inline tags - <b>b (bold)</b>, <i>i (italic)</i>,
<s>s (strikeout)</s>,
<u>u (underline)</u>, <code>code (fixed-width)</code>,
<span style="background-color: lime; ">span</span>, <a
href="http://www.gnostice.com/">a (anchor - hyperlink)</a></li>
<li>block tags - div (box), table/tr/td (table), ul/ol/li
(list)</li>
<li>other tags - script, noscript</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>IE (see MSDN)</li>
<li>Mozilla (see MDC)</li>
<li>Ajax</li>
</ul>
</li>
<li>CSS2
<ul>
<li>Mozilla (see W3C reference)
<li>IE (see MSDN for filter style)</li>
<li>Accessibility</li>
</ul>
</li>
</ul>
</li>
<li>Doctype - HTML (Transitional/Strict) or XHTML </li>
<li>How Web Pages Work
<ul>
<li>HTTP request</li>
<li>HTTP response</li>
</ul>
</li>
<li>Web Applications - Server-side scripting
<ul>
<li>CGI</li>
<li>ASP, JSP, PHP</li>
<li>ASP.NET</li>
</ul>
</li>
<li>Browser engines
<ul>
<li>IE</li>
<li>Mozilla</li>
<li>KHTML/Webkit</li>
</ul>
</li>
<li>Mobile browsers
<ul>
<li>WAP - very old phones</li>
<li>XHTML - cheap phones</li>
<li>HTML, XHTML, HTML5 - new/expensive phones</li>
</ul>
</li>
<li>HTML 5 and CSS3 - What's New</li>
</ul>

</body>
</html>

--
Bwig Zomberi

Martin Honnen

unread,
Oct 20, 2010, 8:20:20 AM10/20/10
to
Bwig Zomberi wrote:

> Does IE9 support addEventListener?

Yes, but contrary to other browsers addEventListener is not available in
quirks mode so
http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102001.html
does work while
http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102002.html
does not work, giving an error that the method is not supported.
See also
http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx


--

Martin Honnen
http://msmvps.com/blogs/martin_honnen/

Bwig Zomberi

unread,
Oct 21, 2010, 2:53:26 AM10/21/10
to
Martin Honnen wrote:
> Bwig Zomberi wrote:
>
>> Does IE9 support addEventListener?
>
> Yes, but contrary to other browsers addEventListener is not available in
> quirks mode so
> http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102001.html
> does work while
> http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102002.html
> does not work, giving an error that the method is not supported.

Thanks, Martin. It works when I used standards mode. It is a pity that
IE9 also requires this.

--
Bwig Zomberi

Gregor Kofler

unread,
Oct 21, 2010, 5:42:42 AM10/21/10
to
Am 2010-10-21 08:53, Bwig Zomberi meinte:

Requires what? Since feature testing with event handling is compulsory
(IE6 to IE8 will prevail for years to come), there's no need to care
about rendering mode and IE version.

Gregor

--
http://vxjs.gregorkofler.com

Bwig Zomberi

unread,
Oct 21, 2010, 6:09:37 AM10/21/10
to

What you are saying is meant for the web developer. The browser
manufacturer (Microsoft) could have taken this opportunity to make IE
behave more like FireFox or Opera. Non-IE browsers do not require the
HTML source to be picture perfect to support standard API.

After Martin's post, I modified my code with feature testing. However, I
find that IE5.5 will throw an error if I set cursor style to "pointer".
I still have to check navigator.userAgent and set the style to "hand".
Any way I can avoid that?


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HTML Course</title>
<style type="text/css">


ul.LinkedList { display: block; }
ul.LinkedList ul { display: none; }
ul.LinkedList ul ul { display: none; }
ul.LinkedList ul ul ul { display: none; }
ul.LinkedList ul ul ul ul { display: none; }
ul.LinkedList ul ul ul ul ul { display: none; }
</style>

<script type="text/JavaScript">
function addEvents() {
activateTree(document.getElementById("LinkedList1"));
}

function activateTree(oList) {
if (oList.addEventListener) {
oList.addEventListener("click", toggleBranch, false);
} else if (oList.attachEvent) {
oList.attachEvent("onclick", toggleBranch);
}
addLinksToBranches(oList);
}

function toggleBranch(event) {
if (event.target) {
var oBranch = event.target;
} else if (event.srcElement) {
var oBranch = event.srcElement;
}
var cSubBranches = oBranch.getElementsByTagName("ul");
if (cSubBranches.length > 0) {
if (cSubBranches[0].style.display == "block") {
cSubBranches[0].style.display = "none";
} else {
cSubBranches[0].style.display = "block";
};
}
}

function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
cBranches[i].style.cursor = "hand";
} else {
cBranches[i].style.cursor = "pointer";
}
cBranches[i].style.color = "blue";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.cursor = "auto";
}
}
}
}
</script>
</head>
<body onload="addEvents();">

<a href="http://www.example.com/">a (anchor -

hyperlink)</a></li>
<li>block tags - div (box), table/tr/td (table), ul/ol/li
(list)</li>
<li>other tags - script, noscript</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>IE (see MSDN)</li>
<li>Mozilla (see MDC)</li>
<li>Ajax</li>
</ul>
</li>
<li>CSS2
<ul>

<li>Mozilla (see W3C reference)</li>

Evertjan.

unread,
Oct 21, 2010, 7:22:51 AM10/21/10
to
Bwig Zomberi wrote on 21 okt 2010 in comp.lang.javascript:

> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?
>

I seem to remember setting them to both:

cursor:hand;cursor:pointer;

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Martin Honnen

unread,
Oct 21, 2010, 7:34:55 AM10/21/10
to
Bwig Zomberi wrote:

> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?

> if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {


> cBranches[i].style.cursor = "hand";
> } else {
> cBranches[i].style.cursor = "pointer";
> }

Do you really need to support IE 5.5? If you need to do that then you
might be able to use conditional compilation
http://msdn.microsoft.com/en-us/library/121hztk3%28v=VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/s59bkzce%28v=VS.85%29.aspx

Martin Honnen

unread,
Oct 21, 2010, 7:43:36 AM10/21/10
to

As you want to indentify an IE version and not a JScript version you
might want to use conditional comments in your HTML
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
not conditional JScript compilation.

For instance

<script type="text/javascript">
var cursor = 'pointer';
</script>
<!--[if lt IE 6]>
<script type="text/javascript">
var cursor = 'hand';
</script>
<![endif]-->

and now use the variable named 'cursor' in other script blocks e.g. when
you want to set the CSS cursor property of your elements.

Gregor Kofler

unread,
Oct 21, 2010, 8:30:09 AM10/21/10
to
Am 2010-10-21 12:09, Bwig Zomberi meinte:
> Gregor Kofler wrote:

>> Requires what? Since feature testing with event handling is compulsory
>> (IE6 to IE8 will prevail for years to come), there's no need to care
>> about rendering mode and IE version.
>
> What you are saying is meant for the web developer. The browser
> manufacturer (Microsoft) could have taken this opportunity to make IE
> behave more like FireFox or Opera. Non-IE browsers do not require the
> HTML source to be picture perfect to support standard API.

For MS it seems to be of utter importance to make "incompatible" pages
look good - even on their contemporary browsers. (Well, if not a lot of
people with broken webapps might stick to IE6 forever. Literally.)

> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
> <title>HTML Course</title>
> <style type="text/css">
> ul.LinkedList { display: block; }
> ul.LinkedList ul { display: none; }

What are the lines below good for?

> ul.LinkedList ul ul { display: none; }
> ul.LinkedList ul ul ul { display: none; }
> ul.LinkedList ul ul ul ul { display: none; }
> ul.LinkedList ul ul ul ul ul { display: none; }

> <script type="text/JavaScript">

Nitpicking: type="text/javascript"

Do you have to set it via JS? You can use both conditional comments in
your markup and in JS.

[snip]

Gregor


--
http://vxjs.gregorkofler.com

Bwig Zomberi

unread,
Oct 22, 2010, 12:59:07 AM10/22/10
to

I use IETester to test web pages in all versions of IE (5.5 to 9 Beta).
The page throws up error if I load it in IE 5.5. There are a lot of
people still using Win 2000 and Win 9x/Me.


--
Bwig Zomberi

Bwig Zomberi

unread,
Oct 22, 2010, 1:34:33 AM10/22/10
to
Evertjan. wrote:
> Bwig Zomberi wrote on 21 okt 2010 in comp.lang.javascript:
>
>> After Martin's post, I modified my code with feature testing. However, I
>> find that IE5.5 will throw an error if I set cursor style to "pointer".
>> I still have to check navigator.userAgent and set the style to "hand".
>> Any way I can avoid that?
>>
>
> I seem to remember setting them to both:
>
> cursor:hand;cursor:pointer;
>

This works in CSS. When I tried it in JS, the IE debugger finds it as an
invalid argument.


--
Bwig Zomberi

Bwig Zomberi

unread,
Oct 22, 2010, 1:50:25 AM10/22/10
to
Gregor Kofler wrote:
> Am 2010-10-21 12:09, Bwig Zomberi meinte:
>> Gregor Kofler wrote:

> For MS it seems to be of utter importance to make "incompatible" pages
> look good - even on their contemporary browsers. (Well, if not a lot of
> people with broken webapps might stick to IE6 forever. Literally.)

They should indeed provide backward compatibility. But supporting
standard API only under special conditions is ridiculous.

>
> Do you have to set it via JS? You can use both conditional comments in
> your markup and in JS.
>

I have steered clear of conditional comments because I never liked the
look of it. It now seems necessary but I don't know how to do it.

How do you use JS conditional comments in the following function to
expose cursor="pointer" to IE6 and non-IE browsers, and hide it from IE
5x? In IE 5.5 (I use IETester), the debugger catches cursor="pointer" no
matter what I try. All help is appreciated.

function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
cBranches[i].style.cursor = "hand";
} else {
cBranches[i].style.cursor = "pointer";
}

cBranches[i].style.color = "blue";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.cursor = "auto";
}
}
}
}

For now, I have used a try-catch block that does the job. It does not
feel right though.

try {


cBranches[i].style.cursor = "pointer";

} catch (e) {


cBranches[i].style.cursor = "hand";
}

--
Bwig Zomberi

SAM

unread,
Oct 22, 2010, 4:45:43 AM10/22/10
to
Le 22/10/10 07:50, Bwig Zomberi a écrit :

>
> How do you use JS conditional comments in the following function to
> expose cursor="pointer" to IE6 and non-IE browsers, and hide it from IE
> 5x? In IE 5.5 (I use IETester), the debugger catches cursor="pointer" no
> matter what I try. All help is appreciated.

maybe (without any conditional comments)
using a css class fixed for your purpose ?

.branch { cursor: pointer; cursor: hand; color: blue; }

> function addLinksToBranches(oList) {
> var cBranches = oList.getElementsByTagName("li");
> var i, n, cSubBranches;
> if (cBranches.length > 0) {
> for (i=0, n = cBranches.length; i < n; i++) {
> cSubBranches = cBranches[i].getElementsByTagName("ul");
> if (cSubBranches.length > 0) {
> addLinksToBranches(cSubBranches[0]);

cBranches[i].className = 'branch';

> if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
> cBranches[i].style.cursor = "hand";
> } else {
> cBranches[i].style.cursor = "pointer";
> }
> cBranches[i].style.color = "blue";

no more usefull ( class 'branch')

> cSubBranches[0].style.color = "black";
> cSubBranches[0].style.cursor = "auto";

why "black" or/and "auto" ? when "" could be enough

> }
> }
> }
> }


--
Stéphane Moriaux avec/with iMac-intel

Bwig Zomberi

unread,
Oct 22, 2010, 4:53:51 AM10/22/10
to
SAM wrote:
> Le 22/10/10 07:50, Bwig Zomberi a écrit :
>>
>> How do you use JS conditional comments in the following function to
>> expose cursor="pointer" to IE6 and non-IE browsers, and hide it from IE
>> 5x? In IE 5.5 (I use IETester), the debugger catches cursor="pointer" no
>> matter what I try. All help is appreciated.
>
> maybe (without any conditional comments)
> using a css class fixed for your purpose ?
>
> .branch { cursor: pointer; cursor: hand; color: blue; }

Yes, Evertjan suggested that but I was curious as to how JS conditions
could fix it.

--
Bwig Zomberi

SAM

unread,
Oct 22, 2010, 8:48:42 AM10/22/10
to
Le 22/10/10 10:53, Bwig Zomberi a écrit :

> SAM wrote:
>>
>> maybe (without any conditional comments)
>> using a css class fixed for your purpose ?
>>
>> .branch { cursor: pointer; cursor: hand; color: blue; }
>
> Yes, Evertjan suggested that but I was curious as to how JS conditions
> could fix it.

I don't know "JS" conditional comments ...

<p id="test"> blah </p>


<script type="text/javascript">
var cursor = 'pointer';
</script>

<!--[if ite IE5.5]>
<script> cursor = 'hand'; </script>
<![Endif]-->
<script type="text/javascript">
document.getElementById('test').style.cursor = cursor;
</script>


cursor:hand; for any IE

<p id="test2"> blah </p>
<script type="text/javascript">
var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
document.getElementById('test2').style.cursor = cursor;
</script>

Gregor Kofler

unread,
Oct 22, 2010, 12:54:52 PM10/22/10
to
Am 2010-10-22 10:53, Bwig Zomberi meinte:

Google can do that for you. A search reveals (among a lot of other hits):

http://en.wikipedia.org/wiki/Conditional_comment


Gregor


--
http://vxjs.gregorkofler.com

Evertjan.

unread,
Oct 22, 2010, 1:32:07 PM10/22/10
to

No need for that, just manipulate classes in Javascript and use the style
as a compound property like in the class .branch above.

Bwig Zomberi

unread,
Oct 25, 2010, 2:38:30 AM10/25/10
to

I found the documentation all right but I could not come up with a way
to use conditional comments in that JS function and yet expose
cursor="pointer" to other browsers. Other browsers ignore conditional
comments.

I have gone with Evertjan's and SAM's idea. Thanks.

function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");

var i, n, cSubBranches, sCursorStyle;


if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);

// .HandCursorStyle { cursor: pointer; cursor: hand; }
cBranches[i].className = "HandCursorStyle";

cBranches[i].style.color = "blue";

cSubBranches[0].style.color = "black";

cSubBranches[0].style.cursor = "default";
}
}
}
}

--
Bwig Zomberi

SAM

unread,
Oct 25, 2010, 3:48:05 AM10/25/10
to
Le 25/10/10 08:38, Bwig Zomberi a écrit :

> Gregor Kofler wrote:
>>
>> Google can do that for you. A search reveals (among a lot of other hits):
>>
>> http://en.wikipedia.org/wiki/Conditional_comment
>
> I found the documentation all right but I could not come up with a way
> to use conditional comments in that JS function and yet expose
> cursor="pointer" to other browsers. Other browsers ignore conditional
> comments.

Yes, absolutely, it's like that that it works : comments only for IEs

So ... as shown in my previous post ...

JS : variables for other browsers
comment (for IE <= 5.5 for instance) + JS : variables for those IEs
JS : common variables and functions

Eric Bednarz

unread,
Oct 27, 2010, 9:28:52 AM10/27/10
to
SAM <stephanemor...@wanadoo.fr.invalid> writes:

> cursor:hand; for any IE

^^^
[…]

> var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';

^^

There are only two problems with that code.

1) You didn’t bother to test it in any IE.
2) As has been mentioned countless times in this NG, there is no
relation between JScript and MSHTML(-features). Unsurprisingly,
the above does not work in IE beta 9 in IE 9 standards mode.


--
λ

Eric Bednarz

unread,
Oct 27, 2010, 9:32:54 AM10/27/10
to
Eric Bednarz <bed...@fahr-zur-hoelle.org> writes:

> SAM <stephanemor...@wanadoo.fr.invalid> writes:

>> var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
> ^^

> 2) As has been mentioned countless times in this NG, there is no


> relation between JScript and MSHTML(-features). Unsurprisingly,
> the above does not work in IE beta 9 in IE 9 standards mode.

(to avoid confusion: even after the syntax error is corrected)

--
λ

SAM

unread,
Oct 27, 2010, 11:41:12 AM10/27/10
to
Le 27/10/10 15:28, Eric Bednarz a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> writes:
>
>> cursor:hand; for any IE
> ^^^
> […]
>
>> var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
> ^^

possibly there is no need of the last 'cc' ...

> There are only two problems with that code.
>
> 1) You didn’t bother to test it in any IE.

as /*@cc_on ... @*/
is only understood by M$ products ...
Normally any IE will read and understand that, no ?

> 2) As has been mentioned countless times in this NG, there is no
> relation between JScript and MSHTML(-features).

Don't know of what you're speaking

> Unsurprisingly, the above does not work in IE beta 9 in IE 9 standards mode.

Ha ?
Tant mieux !
As IE9 certainly understands cursor: pointer; (I hope ! Does it?)
that's better again.

0 new messages