js learning events

Oct 13 posted in AJAX (RSS), comments.

Event is part of DOM, DOM Level1 in any event not defined in the Level of a small part of the definition of a subset of the complete event is provided in the Level3, the standards finalized in 2004.

Mozilla's DOM event model and standards of the most close to, IE has become the only mode of a DOM events supported by the lack of a good browser.

2. . Event Flow

Event stream means that the page can be not only an even number of elements to respond to the same incident.

1. Bubble-type event

IE solution on the nickname for the bubble technology. Bubble-type events in the basic idea is that time in accordance with the most target-specific to least specific sequence of events triggered by the target.

IE6.0 in, <html/> elements can also receive time bubble.

2. Capture Event

The use of Netscape Navigator4.0 Event capture solution. Events from the most uncertain object (document object) and the trigger, and then to the most accurate.

3. DOM event flow

DOM event model to support the two: catch-type events and bubble-type events, but capture type incident occurs first. Two DOM event will trigger a flow of all the objects, document objects from the beginning, but also the end of document object.

DOM event model of the nature of the most unique is that text nodes are also trigger events (not in IE).

Three . Time to deal with function / monitor function

Incident is the user or browser of the particular act itself. These events have their own names, such as click, load, etc.. For responding to a call to a function of the incident known as the event handler.

If it is in the distribution of JavaScript event handler, you need to first obtain a reference to deal with the object, and then assign function to the event handler attribute, eg1.

var oDiv = document.getElementById ( "div1");
oDiv.onclick = function () (
alert ( "I was clicked.");
)

Use this allocation method, event handler must be lowercase in order to correctly respond to the incident.

Eg2. <div"alert('I Was clicked.')"> </ div>

Second, in the cases, the event handler can be the case

1. IE

In IE, each element and the window object has two methods: attachEvent () and detachEvent (). attachEvent () used to attach an event to the event handler. And detachEvent () event handler to be separated. Eg.

var fnClick = function () (
alert ( "Clicked!");
)
var oDiv = document.getElementById ( "div1");
oDiv.attachEvent ( "onclick", fnClick);
oDiv.detachEvent ( "onclick", fnClick);

2. DOM

DOM methods addEventListener () and removeEventListener () for distribution and to remove the event handler. And IE is different from the needs of these three parameters: event name, it is necessary to deal with the distribution function and the function for the bubble phase (the time for false) or the capture phase (the time for true). Eg.

oDiv. addEventListener ( "onclick", fnClick, false);

oDiv.removeEventListener ( "onclick", fnClick, false);

If you use the traditional method of directly attribute to the event handler assignment, event handler function will be added to the bubble phase of the incident, eg.

oDiv.onclick = fnClick;

oDiv.removeEventListener ( "onclick", fnClick, false);

Four . Event object

Only in the event object is created when the incident occurred, and only to access the event handler. The implementation of all the event handler after the event object to be destroyed.

1. Positioning

In IE, the event object is a property of window object event, In other words, the event handler must do visit the event object:

oDiv.onclick = function () (

var oEvent = window.event;

)

Event objects can only be visited in the time of the incident. All the event handler is finished, the event object to be destroyed.

2. Attribute / method

See pages 233-235 pages, will not elaborate.

3. Similarity

1) to obtain the types of events

The following code can be in any browser, the type of access to the incident:

var sType = oEvent.type;

It back to "click" or "mouseover" the value of such. Eg.

function handleEvent (oEvent) (
if (oEvent.type == "click") (
alert ( "Clicked!");
) Else if (oEvent.type == "mouseover") (
alert ( "mouse over!");
)
)
oDiv.onclick = handleEvent;
oDiv.onmouseover = handleEvent;

2) access to key code

Eg. Var iKeyCode = oEvent.keyCode;

For example, Enter keys keyCode 13, keyCode space for 32 keys, 8 keys back.

3) Detection of Shift, Alt and Ctrl keys

Eg. Var bShift = oEvent.shiftKey;

var bAlt = oEvent.altKey;

var bCtrl = oEvent.ctrlKey;

4) Coordinate access to client

Eg. Var iClientX = oEvent.clientX;

var iClientY = oEvent.clientY;

5) to obtain the screen coordinates

ScreenX and screenY attributes can be used to obtain the mouse pointer on the computer screen the location of

var iScreenX = oEvent.screenX;

var iScreenY = oEvent.screenY;

4. Distinction

1) to obtain the target

In IE in: var oTarget = oEvent.srcElement;

In DOM-compliant browser: var oTarger = oEvent.target;

2) obtain the character code

In IE in: var iCharCode = oEvent.keyCode;

In DOM-compliant browser: var iCharCode = oEvent.charCode;

3) to prevent the default behavior of an event

In IE in: oEvent.returnValue = false;

In DOM-compliant browser: oEvent.preventDefault ();

4) to prevent replication events (bubble)

In IE in: oEvent.cancelBubble = true;

In mozilla in: oEvent.stopPropagation ();

Five . The type of incident

DOM standard defines the following events:

Mouse keyboard events events

HTML event: the window or the occurrence of specific changes in client - server interaction when the trigger;

Mutation events: the underlying structure of the DOM to change the trigger.

1. Mouse events

Eg. Click, dbclick, mousedown, mouseout, mouseover, mouseup, mouseover.

1) Properties

Eg. Coordinate attributes (eg. ClientX and clientY, etc.), type attribute, target or srcElement property, shiftKey, ctrlKey, altKey, metaKey (DOM) properties, button attributes (only in the mousedown, mouseover, mouseout, mouseover, and mouseup events) .

2) the order of

Goals in the same order according to the following events occur: mousedown-> mouseup-> click-> mousedown-> mouseup-> click-> dbclick.

2. Keyboard events

Keyboard events: keydown, keypress and keyup.

1) the properties of the incident

Of a keyboard event, the event will fill in the following attributes: keyCode, charCode (only DOM), target (DOM) or srcElement (IE), shiftKey, ctrlKey, altKey, metaKey (DOM) properties.

2) the order of

Characters by pressing a key sequence of events: keydown-> keypress-> keyup;

Press a non-character key, the order of events: keydown-> keyup.

3. HTML events

HTML events are: load, unload, abort, error, select, change, submit, reset, resize, scroll, focus, blur events.

1) load and unload events

eg. window.onload = function () (

alert ( "loaded!");

)

2) resize event

resize events when used to determine the dynamic changes in some elements. Eg.

<body onresize="alert('Resizing')">

Maximize or minimize a window, it will also trigger the resize event.

3) Scroll events

Eg. <body Onscroll="alert('Scroll)">

4. Change events

Changes in the incident include the following:

DOMSubtreeModified - When a document or a subset of elements to add or remove the tree because the node and change the trigger;

DOMNodeInserted - When a node to another node as child nodes to trigger insertion;

DOMNodeRemoved - When a node to another node as child nodes to trigger deletion;

DOMNodeRemovedFromDocument - When a node to delete from the document when the trigger;

DOMNodeInsertedIntoDocument - When a node inserted into the document when the trigger.

The purpose of these events is to provide a separate incident in the scope of the language so that it can be used in all the languages based on XML.

Six . Cross-platform event

1. EventUtil object

var EventUtil = new Object;

2. Add / Remove event handler

EventUtil.addEventHandler = function () (
if (oTarget.addEventListener) (/ / for DOM-compatible browser oTarget.addEventListener (sEventType, fnHandler, false);
) Else if (oTarget.attachEvent) (/ / for IE
oTarget.attachEvent ( "on" + sEventType, fnHandler);
) Else (
oTarget [ "on" + sEventType] = fnHandler;
)
)

EventUtil.removeHandler = function (oTarget, sEventType, fnHandler) (
if (oTarget.removeEventListener) (/ / for DOM-compatible browser oTarget.removeEventListener (sEventType, fnHandler, false);
) Else if (oTarget.detachEvent) (/ / for IE
oTarget.detachEvent ( "on" + sEventType, fnHandler);
) Else (
oTarget [ "on" + sEventType] = null;
)
)

3. Formatted event object

To deal with IE and a DOM object in the event the difference between the best means is to adjust their performance as much as possible so that similar, because more are using a browser DOM types of events, so IE's event model will be adjusted DOM event model is closer to it.

According to DOM properties / methods with the IE properties / methods, and finally can reach the following target function of the event format, as follows:

EventUtil.formatEvent = function (oEvent) (
if (isIE & & isWin) (
oEvent.charCode = (oEvent.type == "keypress")? oEvent.keyCode: 0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode> 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
oEvent.preventDefault = function () (
this.returnValue = false;
);

if (oEvent.type == "mouseout") (
oEvent.relatedTarget = oEvent.toElement;
) Else if (oEvent.type == "mouseover") (
oEvent.relatedTarget = oEvent.fromElement;
)
oEvent.stopPropagation = function () (
this.cancelBubble = true;
);
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date ()). getTime ();
)
return oEvent;
)

4. To obtain the target event

IE and the DOM using a different method to obtain the target event. IE in the, event object is associated with the window object, and in the DOM, it is independent of any other object, and is passed as a parameter. We prepared the following to obtain a generic event object function, the code is as follows:

EventUtil.getEvent = function () (
if (window.event) (
return this.formatEvent (window.event);
) Else (
return EventUtil.getEvent.caller.arguments [0];
)
)

For example call is as follows:

oDiv.onclick = function () (
var oEvent = EventUtil.getEvent ();
)