We Keep Coding

onblur event distinguishes in IE/Firefox / Chrome

i'm using on HTML input fields the onblurevent to validate input directy after leaving the field. In the eventhandler look after the id of source element and call validation methods:
<input id="ex1" onblur="app.checkInput(event);" />
<input id="ex2" onblur="app.checkInput(event);" />
my JS-validation:
this.checkInput = function(event) {
var result;
if (event.srcElement.id == 'ex1') {
result = this.validateEx1();
}
else if ( event.srcElement.id == 'ex2') {
result = this.validateEx12();
} //...
This works fine in IE and Chrome, but the event parameter has in Firefox no Field 'srcElement'. Is there a way to make it compatible for all browsers?
Thanks for your help in advance.

Try with standards.
You can use target or currentTarget
event.currentTarget.id;
More info:
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Using javascript how to log keyboard events?

<input type="text"></input>
<script>
var a = document.getElementsByTagName('input')[0];
a.onkeypress = function(evt) {
this.evt = evt || event;
var b = String.fromCharCode(evt.keyCode);
while(forEach(evt) {
alert("You pressed " + b);
}
};
</script>
This doesn't seems to be working. It should always alert the key when user presses a key.
The browser here is Chrome.

It's not working because you're calling a function you don't define (forEach), here:
while(forEach(evt) {
// ^
If you look in the JavaScript console, you'll see an error related to that.
Also, you don't want to assign to an evt property on this:
this.evt = evt || event; // <== Don't do this
Just use the argument:
evt = evt || event;
And there's no reason for a loop if you're going to alert every keypress individually.
Also, input elements don't have closing tags. It should just be:
<input type="text">
or (in XHTML, and optionally in HTML):
<input type="text"/>
not:
<input type="text"></input>
And finally, note that some browsers use which for the keycode, others use keyCode. You can use || to use whichever the browser supplies:
String.fromCharCode(evt.which || evt.keyCode)
Here's a minimal update: Live Copy | Live Source
<input type="text">
<script>
var a = document.getElementsByTagName('input')[0];
a.onkeypress = function(evt) {
evt = evt || event;
alert("You pressed " + String.fromCharCode(evt.which || evt.keyCode));
};
</script>

There is no need for a while loop. Simply grab the key in a cross browser compliant manner, find its char equivalent and alert it.
var a = document.getElementsByTagName('input')[0];
a.onkeypress = function(event) {
//e.which & e.keyCode are for cross browser compliance
alert(String.fromCharCode(event.keyCode || event.which));
};
Working Example http://jsfiddle.net/VZEQe/

jquery stopPropagation() and sending "event"?

(jsbin)
I created a table with a button inside.
The Table has onclick event and also the inside Button
But when Im pressing the button ,the event bubbles up to the table. ( and I get 2 alerts)
So I used ev.stopPropagation();
And its working. But in order for it to work , I had to do :
in html :
<input type='button' onclick='doWork(event);'/>
in Js :
function doWork(ev)
{
ev.stopPropagation();
alert('button');
}
Is this the correct way ?
Must I send the event ? I know that different browsers uses differently the event .

IE doesn't require passing event object and we can access it using window.event. Old IE versions have not supported e.stopPropagation. So, for cross browser compatability reason, you should try this:
function doWork(e)
{
var evt = e || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
alert('button');
}

This is another way:
<table onclick="doWork();" border=2 style="width:70px;">
<input type='button' onclick='alert("button");'/>
function doWork(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.tagName.toUpperCase() !== 'INPUT'){
alert('table');
}
}

I can't see anything wrong with this, and yes, you need to parametrise the event so you can call stopPropagation() on it in your event handler.

Firefox: HTML keyUp event has no event data

The onKeyUp event is working in IE(7) and not in Firefox(4.0.1).
I have a textfield with attribute onclick="eventName();"
in the Javascript function eventName(evt). I do not have an event data, the event data is not sent by Firefox. In IE on the other hand window.event IS filled so here it works...
Both IE and Firefox reach the function just fine. Only problem is that I need the event data there.
Can anyone direct me towards a solution for this annoying problem?
Example page:
<html>
<head>
<script type="text/javascript">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
</script>
</head>
<body>
<span>Enter your name: </span>
<input type="text" id="fname" onkeyup="upperCase()" />
</body>
</html>

IE handles events with a global. Everything else the event passed as the first argument to the function.
onkeyup="upperCase()"
You don't do anything with it in there. I'm not even sure you can — I haven't touched an intrinsic event attribute for anything but the most trivial toy in years.
Given
document.getElementById('fname').keyup = upperCase;
(or, better, using attachEvent / addEvent, the evt variable will be populated.)

To make this work in all browsers, pass the event to the function you're calling:
<input type="text" id="fname" onkeyup="upperCase(event)">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
<input type="text" id="fname" onkeyup="upperCase(event)">
In some browsers such as IE, this works because event resolves to window.event, which always refers to the current event being handled. In other browsers (such as Firefox), this works because event is a variable that's in scope for the event handler. You can imagine the contents of the onkeyup attribute as being the body of a function that looks like
function(event) {
// Attribute value here
}

You forgot to actually pass the event as parameter, should be:
<input type="text" id="fname" onkeyup="upperCase(event)" />

Capture javascript event in IE Mobile

I need to detect the id of the element that generated an onchange event.
This code work in most modern browsers:
<input type="text" onchange="return onchange_handler(event);"
function onchange_handler(event) {
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
But it does not work in IE Mobile.
I have tried the following code, and at least the event is fired and the handler function is called, but window.event is not available when event handler is called:
<input type="text" onchange="return onchange_handler();"
function onchange_handler() {
var event = window.event; // <= evaluated as UNDEFINED
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
Is there any way to obtain a reference to the fired event? Or an alternative approach to know the id of the element that caused the event.

A workaround would be to pass the element to the callback: (untested)
<input type="text" id="mytextbox" onchange="return onchange_handler(this);"
function onchange_handler(element) {
var id = element.id;
...
return false;
}