IE is a bubble event, that is, from the most specific event target to the least specific event Target
I. event stream
IE is a bubble event, that is, from the most specific event target to the least specific event target.
Netscape Navigator uses capture events, which are the opposite of the bubble events used in IE.
DOM Event streams support both event models, but capture events occur first.
Ii. event processing functions/listener Functions
Events are specific actions performed by users or browsers. All these events have their own names, such as click, load, and mouseover.
There are two ways to allocate event processing functions: In JavaScript or in HTML.
If an event handler function is assigned to JavaScript, you must first obtain the reference of the object to be processed, and then assign the function to the corresponding event handler function attribute, (The name of the event processing function must be in lowercase ):
The Code is as follows:
Var oDiv = document. getElementById ("p1 ");
ODiv. onclick = function (){
Alert ("I was clicked ");
}
If you assign an event handler function to HTML, you only need to add the feature of the event handler function to the HTML Tag and include the appropriate script as the feature value, as shown below:
The Code is as follows:
To assign multiple event processing functions to each available event, IE and DOM provide their own methods.
In IE, each element and window object have two methods: attachEvent () and detachEvent (). As the name suggests, the former is used to attach an event processing function to an event, the latter is used to separate event processing functions. Each method has two parameters: the name of the event handler function to be allocated and a function. For example:
The Code is as follows:
Var fnClick = function (){
Alert ("Clicked ");
}
Var fnClick2 = function (){
Alert ("Click2 ");
}
Var oDiv = document. getElementById ("p ");
ODiv. attachEvent ("onclick", fnClick );
ODiv. attachEvent ("onclick", fnClick2)
ODiv. detachEvent ("onclick", fnClick );
ODiv. detachEvent ("onclick", fnClick2 );
The DOM uses addEventListener () and removeEventListener () to allocate and remove event handlers. Different from IE, these methods have three parameters. The third parameter identifies whether they are used in the bubble stage or capture stage. The value is true for the capture phase and false for the bubble phase. The third parameter to be removed must be consistent with the added parameter. For example:
The Code is as follows:
Var fnClick = function (){
Alert ("Clicked ");
}
Var fnClick2 = function (){
Alert ("Click2 ");
}
Var oDiv = document. getElementById ("p ");
ODiv. addEventListener ("onclick", fnClick, false );
ODiv. addEventListener ("onclick", fnClick2, false)
ODiv. removeEventListener ("onclick", fnClick, false );
ODiv. removeEventListener ("onclick", fnClick2, false );
Iii. event object
An event object generally contains the information about the object that causes the event, the mouse information when the event occurs, and the keyboard information when the event occurs.
Positioning
In IE, the event object is an attribute event of the window object. The event handler function must access the event object as follows:
The Code is as follows:
ODiv. onclick = function (){
Var oEvent = window. event;
}
According to the DOM standard, the event object must be passed to the event handler as a unique parameter. Therefore, access event objects in DOM-compatible browsers (such as Mozilla, Safair, and Opera) are:
The Code is as follows:
ODiv. onclick = function (){
Var oEvent = arguments [0];
}
// Or
ODiv. onclick = function (oEvent ){
}
Property method similarity
1. Obtain the event type: oEvent. type
2. Obtain the key code: oEvent. keyCode
3. Check Shift, Alt, and Ctrl keys: oEvent. shiftKey; oEvent. altKey; oEvent. ctrlKey;
4. Obtain the client mouse coordinates: oEvent. clientX; oEvent. clientY;
5. Obtain screen coordinates: oEvent. screenX; oEvent. screenY;
Difference of attribute Methods
1. Get target: srcElement for IE and target for DOM;
2. Get the key character code: IE uses keyCode, DOM uses charCode and String. fromCharCode;
3. Prevent the default behavior of an event: IE uses oEvent. returnValue = false, DOM uses the preventDefault () method;
4. Stop event bubbling: oEvent. cancelBubble = true in IE; oEvent. stopPropagation () in DOM ();
Iv. event types
1. mouse events
Mouse events include click, dblclick, mousedown, mouseout, mouseover, mouseup, and mousemove.
Event Sequence: The dblclick event triggers the following events successively: mousedown, mouseup, click, mousedown, mouseup, click, and dblclick.
2. Keyboard Events
Keyboard Events include: keydown, keypress, and keyup.
Event Sequence: When you press a button for a specific character, the following events are triggered successively: keydown, keypress, and keyup. If you press a non-character button, the following events are triggered successively: keydown and keyup.
3. HTML events
HTML events include load, unload, abort, error, select, change, submit, reset, resize, scroll, focus, and blur.
4. Change Events
Although the change event is already part of the DOM standard, no mainstream browsers have implemented it yet. So here we just list it.
Change events include DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, and domnodeinstered1_document.
Author: Artwl
Source: http://artwl.cnblogs.com
