Unobtrusive js IE problem

JavaScript
1

I am just learning js and was able to do a few things, but I was then recomended by Raffles that I should be using unobtrusive js, so I started working on it but I got stuck on the IE attachEvent, can someone point me in the right direction?

here is my code


<html>
<head>
</head>
<body>
name: <input id="test" name="test" type="text" size="50" maxlength="50"/>
<script type="text/javascript">
function format(event)
{
	var target = event.target;
    target.style.background = "#FFFF00";
}
var myvar=document.getElementById("test");
if (myvar.addEventListener)
{
myvar.addEventListener('change', format, false);
}
else if (myvar.attachEvent)
{
myvar.attachEvent('onblur', format);
}
</script>
</body>
</html>
2

I.E. has a different name for the triggering element:

function format( evt )
{
    var target =  evt.target || evt.srcElement;
    
    target.style.background = "#FFFF00";
}
3

Thanks, okay, that fixed the problem, but, what if I wanted to access the value of something, for instance, I was working on a different script where I would access the value of a field by doing target.value and it works just fine in firefox but it does nothing on IE, now, here is my code


&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.errorcontainer
	{
		text-align:left;
		width:auto;
		height:auto;
		position:fixed;
		top:auto;
		bottom:auto;
		right:10px;
		background:red;
		color:white;
	}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="text" id="tester"&gt;
&lt;p/&gt;
&lt;input disabled id="button" type="submit" value="submit" &gt;
&lt;div id="consoleoferrors" class="errorcontainer"&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
function checkfieldforinvalidchars(event)
{
//Variables
var NOsymbolshere=new RegExp(/[ª!"·$%&()=?¿¡'º^*¨_:;,.-`+`+´ç]/);
var NOnumbershere=new RegExp(/\\d/);
var thefield=event.target || event.srcElement;
var thevalue=event.target.value || event.srcElement.value;
//Conditions
if (NOnumbershere.test(thevalue)==true)
{
document.getElementById("consoleoferrors").innerHTML=("We just found an error in your input:&lt;br&gt;No numbers are allowed in this field.&lt;br&gt;In this field you can only use letters from a-z and also accented vowels.&lt;br&gt;Please correct the highlighted field!");
thefield.style.background="#FFFF00";
}
else if (NOsymbolshere.test(thevalue)==true)
{
document.getElementById("consoleoferrors").innerHTML=("We just found an error in your input:&lt;br&gt;No symbols are allowed in this field.&lt;br&gt;In this field you can only use letters from a-z and also accented vowels.&lt;br&gt;Please correct the highlighted field!");
thefield.style.background="#FFFF00";
}
else if(thevalue.length&lt;=1)
{
document.getElementById("consoleoferrors").innerHTML=("This field is mandatory, please complete it correctly!");
thefield.style.background="#FFFF00";
}
else if(thevalue.length&gt;=15)
{
document.getElementById("consoleoferrors").innerHTML=("This field is mandatory and you have enetered too many characters, please fill it up correctly!");
thefield.style.background="#FFFF00";
}
else
{
thefield.style.background="#FFFFFF";
document.getElementById("consoleoferrors").innerHTML=("");
}
if (document.getElementById("consoleoferrors").innerHTML=="")
{
document.getElementById("button").disabled=false;
}
else
{
document.getElementById("button").disabled=true;
}
}

var apply=document.getElementById("tester");

if (apply.addEventListener)
{
apply.addEventListener('change', checkfieldforinvalidchars, false);
}
else if (apply.attachEvent)
{
apply.attachEvent('onchange', checkfieldforinvalidchars);
}


&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

thanks for your help!!

4

well I think I just figured how to achieve it, problem was that to obtain the value the way I was doing it, it would only work in either one of the browsers

here it would only work in FF


var thevalue=event.target.value || event.srcElement.value;

and here only in IE


var thevalue=event.srcElement.value || event.target.value;

what I did was, since I had already stored the field with


var thefield=event.target || event.srcElement;

then I just did


var thevalue=thefield.value;

which worked beautifully!!!

Thanks for your help again!!! :slight_smile:

5

Then you use the targ variable to get to the value.

For example:


function formatClickHandler(evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    var value = "#FFFF00";
}

Now you have the event, the target element, and the value, which you can use to achieve your needs.

The evt and targ part above are a common pattern that’s used. For example, when handling clicks:


function clickHandler(evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) { // opera bug
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'A') {
        // handle link here
    }
}
6

For IE the OP’s code used window.attachEvent, so the event object is passed to the handler and window.event is undefined.

7

Yes, that is normal, and helps to explain this standard line which retrieves the event from window.event, if the evt variable is undefined.


evt = evt || window.event;

That line is equivalent to:


if (!evt) {
    evt = window.event;
}
8

I think you have misunderstood my point. An event handler installed by IE using attachEvent, receives the event object as a parameter. Reading window.event doesn’t work, at least not under the circumstances of the code in this thread.

9

Earlier version of IE definitely do not pass the event to the function, so it would be good to see some documentation concerning when IE improved on that.

Regardless of that, reading window.event is only performed when evt is a falsy value, so there is no problem there.