Link to home
Start Free TrialLog in
Avatar of radzeen
radzeen

asked on

java script addeventlistener question

I created a simple javascript to learn addeventlistener instead of using normal "onchange" style. This code does not work in in IE6. but it is working in firefox 3. IE shows the error is in line 14 which is :window.addEventListener('load', installListeners, false);

Do I need to do any further adjustment to make compatible with IE or my code is error?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page 8</title>
<script type="text/javascript">
function uppercaseListener(){
 this.value = this.value.toUpperCase();
}
function installListeners(){
 var element = document.getElementById('street');
 element.addEventListener('change', uppercaseListener, false);
}
window.addEventListener('load', installListeners, false);
</script>
</head>
 
<body>
<input id="street" type="text" /><br/>
</body>
</html>

Open in new window

Avatar of hielo
hielo
Flag of Wallis and Futuna image

addEventListener is not supported in IE. Refer to the "Internet Explorer" section here for a workaround:
http://developer.mozilla.org/en/docs/DOM:element.addEventListener
Avatar of radzeen
radzeen

ASKER

thank you. the given url shows some modification can be made to make IE support it.

from the article
Internet Explorer

In IE you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:

if (el.addEventListener){
  el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}
>>  But I dont know which part of the code in my example should be modified.
try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page 8</title>
<script type="text/javascript">
function uppercaseListener(){
 this.value = this.value.toUpperCase();
}
function installListeners(){
	var element = document.getElementById('street');
	attachEvent(element,'change',uppercaseListener);
}
 
function attachEvent(el,evt,action)
{
	if (el.addEventListener){
		el.addEventListener(evt, action, false);
	} else if (el.attachEvent){
		el.attachEvent(evt, action);
	}
}
 
attachEvent(window,'load',installListeners);
</script>
</head>
 
<body>
<input id="street" type="text" /><br/>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Lolly-Ink
Lolly-Ink
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of radzeen

ASKER

Your solution is actually works.But i i dont understand why you wrote that way. Please provide little explanation.
The if statements check whether the browser supports the addEventListener method. Otherwise it assigns the event as shown. Using the attachEvent method didn't work for me.