JavaScript Study Notes (15th) _ basic knowledge

Events are part of the DOM (Document Object Model. Event stream is the sequence of events, which is the main difference between IE and other browsers in event support. Event
Events are part of the DOM (Document Object Model. Event stream is the sequence of events, which is the main difference between IE and other browsers in event support.
I. event stream
1. Bubble events
The solution on IE is a bubble event. Its basic idea is to trigger events in sequence from the most specific target to the least specific event Target (document Object.
Process: According to the DOM hierarchy, it keeps rising to the top like a bubble. (From the p trigger event inside to the body, to the html end until the top of the document ).
2. Capture events
It can be said that the event is the opposite of the bubble, and the event is triggered from the most inaccurate object until the most accurate.
3. DOM event stream
DOM also supports the above two event models. Capture events occur first, start from the document object, and end with the document object.
Ii. event listening Functions
1. IE
Each function and window object have two methods:
AttachEvent () method: additional event handler
[Object]. attachEvent ("event name", processing function fnHandler );
This method has two parameters.
Var fnClick = function (){
Alert ("You clicked DIV with ID p1 ");
}
Var oDiv = document. getElementById ("p1 ");
ODiv. attachEvent ("onclick", fnClick );
You can attach multiple processing functions.
DetachEvent () method: detaches and removes event handlers.
2. DOM
AddEventListener () method: assign an additional event handler
[Object]. addEventListener ("event name", processing function fnHandler, Boolean );
This method has three parameters ("event name", "allocated function", whether the processing function is a bubble stage or a capture stage)
If the event handler is used for the capture stage, the third parameter is true, and the third parameter is false for the bubble stage.
Var fnClick = function (){
Alert ("Clicked! ");
}
Var oDiv = document. getElementById ("p ");
ODiv. addEventListener ("click", fnClick, false );
ODiv. removeEventListener ("click", fnClick, false );
You can attach multiple processing functions.
RemoveEventListener () method: remove the event handler
Iii. event object
It includes three aspects:
1. The object that causes the event: IE is window. event, and DOM is the unique parameter for processing the function;
2. Mouse information when an event occurs;
3. keyboard information when an event occurs.
IE event object
In IE, the event object is an attribute event of the window object. That is to say, the event handler function must access the event object as follows:
ODiv. onclick = function () {var oEvent = window. event;} oDiv. onclick = function () {var oEvent = window. event ;}
Despite being the property of the window object, the event object can only be accessed when an event occurs. All event processing functions are destroyed after execution.
DOM standard event object
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, Safari, and Opera:
ODiv. onclick = function (){
Var oEvent = arguments [0];
}
// You can also
ODiv. onclick = function (oEvent ){
//.....
}