Javascript--dom Level0 and DOM Level2 event model

Event handling is the biggest change in javascropt in recent years and one of the main aspects of existing browsers that still differ. In order to develop a cross-browser-compatible event handler, we need to be aware of some details when writing a program.

"DOM Level0": Also known as traditional event handling-the practice of specifying a function value as an event handler through an object property. Any object allows only one event handler to be specified. DOM Level0 time is divided into two camps: NetScape (Firefox,mozilla,opera,safari) and IE camp, in order to get the two types of browsers can be compatible with the page, you need to pay attention to the following objects and the corresponding several properties.

*event Object-a property that can be used to provide information about the event

The event is treated as a Window object property in IE, Netscape is directly considered an event object, and the ternary operator is used to determine whether an event object nsevent is defined.

How to handle browser compatibility: Var theevent=nsevent? NsEvent:window.event;

*event's Fromelement and Relatedtarget properties (respectively, IE and Firefox)-Get the mouse from which object is removed by mouse events (similar to the Aretoelement and Currenttarget properties, Used to get the object to which the mouse is moved)

How to handle browser compatibility:var oldelement=theevent.fromelement? TheEvent.fromElement:theEvent.relatedTarget;

The target property in Srcelement and Mozilla browsers in *ie--the object used to represent the received time

How to handle browser compatibility:var thesrc=theevent.target? TheEvent.target:theEvent.srcElement;

Cancelbubble and Mozilla stoppropagation--in *ie are used to handle the browser compatibility properties of event bubbling operations

Handling Browser compatibility methods:fiunction stopevent (theevent)

{

if (theevent.stoppropagation)

{

Theevent.stoppropagation ();

}

Else

{

Theevent.cancelbubble=true;

}

}

The main differences between "Dom Level2" and the old event model DOM Level0 are: 1. The new model does not depend on specific event handler properties. 2. You can register multiple event handler functions for any event of any object. Here are the main ways to handle browser compatibility issues: Three object methods supported by browsers such as Mozilla: AddEventListener, RemoveEventListener and dispatchevent and Internet Explorer supported object methods: The difference between attachevent and detachevent.

Add an event listener to the *mozilla class browser, and other similar

Object.addeventlistener ("event", Eventfunction,boolean);

Parameter one: events such as click and load, parameter two: the event handler function specified, parameter three: Specify the event capture model (TRUE), and the Bubbling model (false).

Add an event listener to the *ie browser:

Object.attachevent ("EventHandler", function);

Parameter one: event handler, parameter two: function.

In order to be compatible with the above differences in the processing method:

function Setup (theevent)

{

var Evtobject=document.getelementbyid ("ClickMe");

if (Evtobject.addeventlistener) {//test object model

Evtobject.addeventlistener ("click", Clickme,false);}

else if (evtobject.attachevent) {

Evtobject.attachevent ("onclick", ClickMe);}

else if (Evtobject.onclick) {

Evtobject.onclick=clickme;}

}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Javascript--dom Level0 and DOM Level2 event model