Javascript Events

When user performs any action on HTML DOM element ,there could be certain events to be performed based on parent/child level.

Event Order

Element1 has Element2 in it, when we click on Element2 ,i.e Element2 is child for Element1 ,We should perform two events

1. Element2 click event
2. Element1 click event.

There should be a order for firing click event on these two elements.

• Trigger the elements from outer to inner ,Element1 first,Element2 second,(event capturing). This model is implemented in Netscape Navigator.
• Trigger the elements from inner to outer,Element2 first,Element1 ,(event bubbling). This model is implemented in Internet Explorer and other browsers.

as per W3C Events are first captured until it reaches the target element, and then bubbled up. During the event flow, an event can be responded to at any element in the path (an observer) in either phase by causing an action, and/or by stopping the event (with method event.stopPropagation() for W3C-conforming browsers and command event.cancelBubble = true for IE), and/or by cancelling the default action for the event.

Since Event is a Object in Javascript, it has following properties and methods in it

Event Properties

Event Methods

Preventing bubble and cancelling events

• To prevent an event from bubbling, we must call the "stopPropagation()" method of the event object.
• To prevent the default action of the event to be called, we must call the "preventDefault()" method of the event object.

Attaching Events as per DOM2

Microsoft IE does not follow the W3C model up until Internet Explorer 8, as its own model was created prior to the ratification of the W3C standard.

W3C model event manipulation methods

Mircrosoft Internet Explorer <8 ,event manipulation methods

Cross-Browser Events and Their Bubble and Cancelable Status

Usefull HTML element Javascript attributes.

Here is the some list of javascript element properties and attributes ,that can be used to retrive,manipulate the elements.

JavaScript’s Primitive Data Types

JavaScript has five primitive data types:

• Undefined,
• Null,
• Boolean,
• Number, and
• String.

A Boolean is a logical entity that consists of either a true or a false value. An example of one is:

var BooleanTrue = true;
var BooleanFalse=false;

A Number is a set of numerical digits that represent a number. Through this tutorial, we’ll only use base-10 numbers. An example:

var NumericalValue = 354;
var num = new Number(345);

A String is a set of zero or more characters. An example:

var StringValue = "This is a String";
var NumericString="1234";
var txt = new String("Mahesh Chari");

The undefined property indicates that a variable has not been assigned a value.

var foo;
alert(typeof foo === "undefined"); // true
alert(foo === undefined); // true

null is an object. It’s type is null. null is a special value meaning “no value".

var x = null;
 
alert(typeof(x));//object

Difference between "undefined" and "null"

May coders confuse about this situation in Javascript, lets see some examples.

alert(typeof(null));      // object
alert(typeof(undefined)); // undefined
alert(null != undefined) //true
alert(null == undefined) //true
alert(null !== undefined) //false
alert(null === undefined) //false
alert(Boolean(null)) //false
alert(Boolean(0))    //false
alert(Boolean(""))   //false
alert(123=="123") //true
alert(123==="123") // false because type mismatch