CS511 Final Term Handouts

Final Term CS511

Week 7

In every language of computer science event has its own significance, but in JavaScript, which is utilized in web development, it is very significant. An event is an action that occurs as a result of the user or another source, such as a mouse click. Let’s see how it is handled in

Introduction:

• JavaScript event is an action that can be detected by JavaScript.
• Many of them are initiated by user actions, some are generated by the browser itself.
• We say that an event is triggered and then is handled by JavaScript functions.

There are multiple ways to handle an event. Let’s have a look at them.

The given figure no.80.1 depicts it in detail.

Event Handling Approaches-Inline Hook

Figure no.80.1

The very first line portrays that a JavaScript code has been stored in an external file which includes the some functions such as

function validated (node){…. } // validate the node

function check (node){….

} // check whether the node is or not an appropriate one.

function highlight (node){….

} // highlight text

The figure 80.1 clearly depicts the events on which these functions are invoked.

Another way of handling event is.

Event –Handling Approaches-Event property Approach:

• var mybutton=document.getElementById (‘example’);//In

JavaScript, get an element from the DOM tree (Any approach, such as query Selector or get element ById, can be used). After that we write function name on its appropriate event. As shown below.

• myButton.onclick=alert (‘some message’);

• myButon.addEventListener (‘click’, alert (‘some

message’));// it take two parameter

• myButton.addEventListner (‘mouseout’, funcName);

Similarly, we may define several events on a single object using this method.

The key benefit of this method is that JavaScript code is segregated from HTML. The script/code may be in an external file or an embedded JavaScript. The code of HTML will be very clean and clear, while making changes in HTML you need not worry about the functionality and vice versa. Another way to define event.

Event-Handling Approach-Event Listener Approach (anon function)// anonymous function is pass on.

myButton.addEventListener (‘click’, function () { · var d = new Date (); · alert (“You clicked this on” +d.to String ());

}); // in this piece of code the whole function is pass as a parameter to AddEventListner when a click event is generated.

The last method to handle an event is,

Event Object

When an event is triggered, the browser will construct an event object that contains information about the event.

div.addEventListener (‘click’, function(e) · //findout where the user clicked · var x=e. clientX;

and via e. Target can be used to manipulate elements of div.

Capturing and Bubbling.

Let’s see how JavaScript handle events.

o Events are handled in three phases.