Question

I have a function that gets key value of keyboard. I want to know why we need to use event in parameter

<form>
Char: <input type="text" id="char" size="15" /> Keycode: <input type="text" id="keycode" size="15" />
</form>

<script type="text/javascript">

var charfield=document.getElementById("char")
charfield.onkeydown=function(event){
//var e=window.event || e
document.getElementById("keycode").value=event.keyCode
}

</script>

Answer 1

JS is EVENT DRIVEN, not having access to the event object would be racing in F1 with your bike: you can see the race (cars === events) flying by, but you can’t get to them… (sorry for the dreadful analogy, but you get the point).
To increase/enable more interactivity, you have to know what the client does, so you can respond accordingly. If the user clicks, you might want to know where on the page he clicked, for example. All this and more can be found in the event object. Not having that, is like going to war, unarmed, blindfolded with your hand tied behind your back.

Think about it: you wouldn’t ask the same question in any other programming language where events are crucial (like C++, C#, Java, ActionScript…), anything that gets its input directly from the user, really.

Well, both answers (AlphaMale and chiborg) have told you what the event object is for. The line var e= window.event || e; won’t work in your case, though because you’ve got the default operator jumbled up. Try this:

charfield.onkeydown = function (e)//call parameter e, rather then event
{
    e = e || window.event;//no var, as a parameter, it's already declared, won't set a global
    var key = e.keyCode || e.which;//another default operator here... thx to IE
    //and so on

    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    e.returnValue = false;
    e.cancelBubble = true;
};

So, here’s a small list of methods you can (and often will) use on the event object.

e = e || window.event; is the same as e = e !== undefined ? e : window.event; Since IE doesn’t pass the event object to the handler, you’ll have to get it yourself (it’s a property of the global object, hence window.). Why this didn’t work for you is because you gave the JS engine the choice between window.event (IE only) and e, which you were declaring, the actual event object was stored in the event parameter. You should have written event = event || window.event;

The second line var key = e.keyCode || e.which; gets the key code of what key was pressed, again IE and W3C have agreed to disagree on what this property should be called. There is, in fact only 1 property that they’ve always agreed on: type. Some more properties here

Lastly, I’ve invoked a couple of methods that allow you to prevent/block the event. Suppose you’re asking for a telephone number and the user starts typing text. Using the any of the onkey* events you can pick up on this, and use preventDefault, stopPropagation methods to stop the input from being accepted. (there’s a little more to it than that, but I’m not going into that right now).
again most browsers have these methods for that, but IE has a different event model all together read about it at length here And with that comes the different take on stopping an event in its tracks for IE: returnValue and cancelBubble properties, the latter being particularly annoying, because you set it to true if you want something not to happen… but that’s just my opinion.

There’s a lot more you can do with the event parameter, but in a nutshell -again- JS is EVENT DRIVEN, not having access to the event object would leave you crippled…