Saturday, October 27, 2007

Events in JavaScript

Events are the beating heart of any JavaScript application. Without events there are no scripts. Take a look at any web page with JavaScript in it: in nearly all cases there will be an event that triggers the script. The reason is very simple. JavaScript is meant to add interactivity to your pages: the user does something and the page reacts.

Therefore JavaScript needs a way of detecting user actions so that it knows when to react. It also needs to know which functions to execute, functions that do something that you, the web developer, have judged likely to increase the appeal of your pages. These pages describe the best way to write such scripts. It isn’t easy, but it is very satisfying work.

When the user does something an event takes place. There are also some events that aren’t directly caused by the user: the load event that fires when a page has been loaded, for instance.

There are various types of events, such as:
1. Interface Events: onfocus/onblur, oncontextmenu, onload/onunload, onscroll, onresize;
2. Mouse Events: onclick, ondblclick, onmousedown/onmouseup, onmouseenter/onmouseleave, onmouseover/onmouseout, onmousemove, onmousewheel;
3. Form Events: onchange, onreset, onselect, onsubmit;
4. Keyboard Events: onkeypress, onkeydown/onkeyup;
5. Miscellaneous Events: onabort, onerror, onerrorupdate, ontimeerror, onsubtreemodified, onactivate/ondeactivate, onbeforeactivate/onbeforedeactivate, onbeforeprint/onafterprint, onbeforeupdate/onafterupdate, onbeforecut, onbeforecopy, onbeforepaste, oncut, oncopy, onpaste, onpropertychange, onreadystatechange, onresizestart/onresizeend, oncontrolselect, onselectstart, onselectionchange, onbounce, onfocusin/onfocusout, onbeforeeditfocus, onlosecapture, oncellchange, ondrag, ondragenter/ondragleave, ondragover, ondragstart/ondragend, ondrop, onmove, onmovestart/onmoveend, onlayoutcomplete, ondataavailable, ondatasetchange, ondatasetcomplete, onfilterchange, onrowenter, onrowexit, onrowsdelete, onrowsinserted, onstart/onfinish, onhelp, onbeforeunload.

In Microsoft Dynamics CRM, the syntax for using an event is:

crmForm.all.schema_name.attachEvent('event_name',func);
function func() {
//code
}


or

crmForm.all.schema_name.onevent = function() {
//code
}


For example, if you want to display the label for a certain field in CRM when you click the field, all you have to write is one of the following codes on the OnLoad() event:

1. crmForm.all.schema_name.attachEvent('onclick',showLabel);
function showLabel() {
alert(crmForm.all.schema_name_c.innerHTML);
}

2. crmForm.all.new_camp.onclick = function() {
alert(crmForm.all.new_camp_c.innerHTML);
}

Enjoy testing the other events. I’m sure you’ll find them very useful ;)

3 comentarii:

Pandora said...

Thanks for writing this.

Anonymous said...

Same here: this is the only info I could find on how to do this. Thanks.

Dave said...

This is very useful indeed. Do you happen to have an example of how to use the ondeactivate event please?