I. Flow of events
IE is a bubbling event, from the most specific event target to the least specific event target.
Netscape Navigator uses a catch-type event, which is the opposite of the bubbling event used in IE.
The DOM event stream supports two event models at the same time, but the catch type event occurs first.
event handler function/Listener function
An event is a specific behavior performed by the user or the browser itself. These events all have their own names, such as click, Load, mouseover and so on.
There are two ways to assign event-handler functions: In JavaScript or in HTML.
If you assign an event handler in JavaScript, you first get a reference to the object you want to work with, and then assign the function to the corresponding event-handling function property, like this (the event handler name must be lowercase):
Copy Code code as follows:
var Odiv=document.getelementbyid ("Div1");
Odiv.onclick=function () {
Alert ("I was clicked");
}
If you assign an event handler in HTML, you add the characteristics of the event handler function to the HTML tag and include the appropriate script as the attribute value, as follows:
Copy Code code as follows:
<div onclick= "alert (' I was clicked ')" ></div>
To assign multiple event handlers to each available event, IE and Dom each provide their own methods.
Each element and window object in IE has two methods: Attachevent () and DetachEvent (), which, as the name suggests, are used to attach an event handler function to an event that separates the event handler function. Each method has two parameters: the name of the event handler function to assign and a function. Such as:
Copy Code code as follows:
var fnclick=function () {
Alert ("clicked");
}
var fnclick2=function () {
Alert ("Click2");
}
var Odiv=document.getelementbyid ("div");
Odiv.attachevent ("onclick", Fnclick);
Odiv.attachevent ("onclick", FnClick2)
Odiv.detachevent ("onclick", Fnclick);
Odiv.detachevent ("onclick", FnClick2);
AddEventListener () and RemoveEventListener () are used in the DOM to allocate and remove event-handler functions. Unlike IE, these methods have three parameters, and the third parameter identification is for the bubbling or capturing phase. Used to capture the phase to true and false for the bubbling phase. The third parameter to be removed is consistent with the addition. Such as:
Copy Code code as follows:
var fnclick=function () {
Alert ("clicked");
}
var fnclick2=function () {
Alert ("Click2");
}
var Odiv=document.getelementbyid ("div");
Odiv.addeventlistener ("onclick", fnclick,false);
Odiv.addeventlistener ("onclick", Fnclick2,false)
Odiv.removeeventlistener ("onclick", fnclick,false);
Odiv.removeeventlistener ("onclick", fnclick2,false);
third, the event object
The event object typically contains information about the object that caused the event, the mouse information when the event occurred, and the keyboard information when the event occurred.
Positioning
The event object in IE is a property event of the Window object. The event handler must access the event object like this:
Copy Code code as follows:
Odiv.onclick = function () {
var oevent=window.event;
}
The DOM Standard says that the event object must be passed as a unique parameter to the handler function. Therefore, access to event objects in DOM-compliant browsers such as Mozilla, Safair, Opera is:
Copy Code code as follows:
Odiv.onclick=function () {
var oevent=arguments[0];
}
Or
Odiv.onclick=function (oevent) {
}
Property method Similarity
1. Get Event Type: Oevent.type
2. Get Key code: Oevent.keycode
3, detect shift, ALT, CTRL key: Oevent.shiftkey;oevent.altkey;oevent.ctrlkey;
4, get the client mouse coordinates: Oevent.clientx;oevent.clienty;
5, get screen coordinates: Oevent.screenx;oevent.screeny;
Property method Differences
1, to obtain the target: IE with srcelement,dom target;
2, get the key character code: IE with Keycode,dom with charcode and String.fromCharCode;
3, block the default behavior of an event: IE used oevent.returnvalue=false,dom with preventdefault () method;
4, Stop the event bubbling: IE used in oevent.cancelbubble=true;dom with oevent.stoppropagation ();
iv. Types of events
1. Mouse events
Mouse events include click, DblClick, MouseDown, Mouseout, MouseOver, MouseUp, and MouseMove.
Sequence of events: The DblClick event triggers the following events: MouseDown, MouseUp, click, MouseDown, MouseUp, click, DblClick.
2. Keyboard events
Keyboard events include: KeyDown, KeyPress, KeyUp.
Sequence of events: When a user presses a character key once, the following events are triggered: KeyDown, KeyPress, KeyUp. If you press a non-character key at once, the following events are triggered: KeyDown, KeyUp.
3. HTML Events
HTML events include: Load, unload, Abort, error, select, change, submit, reset, resize, scroll, focus, blur.
4. Change events
Although change events are already part of the DOM standard, no mainstream browsers have implemented it yet. So here's just a list of them.
Change events include: Domsubtreemodified, domnodeinserted, domnoderemoved, Domnoderemovedfromdocument, Domnodeinsteredintodocument.
Author: artwl
Source: http://artwl.cnblogs.com
