JavaScript Advanced Programming Reading Notes (Seventeen) js events_javascript skills

1. Event flow

In IE, there are bubbling events, that is, from the most specific event target to the least specific event target.
Netscape Navigator uses capturing events, which is opposite to the bubbling events used in IE.
DOM event flow supports both event models, but the capture event occurs first.

2. Event handling function/listening function

Events are specific behaviors performed by the user or the browser itself. These events have their own names, such as click, load, mouseover, etc.
There are two ways to assign event handlers: in JavaScript or in HTML.
If you assign an event handler function in JavaScript, you must first obtain a reference to the object to be processed, and then assign the function to the corresponding event handler function attribute, like this (the event handler function name must be lowercase):

Copy code The code is as follows:

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

　If the event handling function is assigned in HTML, then just add the event handling in the HTML tag The characteristics of the function and include the appropriate script as the characteristic value, as follows:

Copy the code The code is as follows:

　

In order to assign multiple event handlers to each available event Functions, IE and DOM each provide their own methods.
Every element and window object in IE has two methods: attachEvent() and detachEvent(). As the name suggests, the former is used to attach an event processing function to an event, and the latter is used to detach the event processing function. Each method takes two parameters: the name of the event handler to assign and a function. For example:

Copy code The code is 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);

DOM uses addEventListener() and removeEventListener() to allocate and remove event handling functions. The difference from IE is that these methods have three parameters, and the third parameter identifies whether it is used for the bubbling phase or the capturing phase. It is true for the capture phase and false for the bubbling phase. The third parameter when removing should remain the same as when adding. For example:

Copy code The code is 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);

3. Event object

The information generally contained by the event object is: caused The object of the event, the mouse information when the event occurs, and the keyboard information when the event occurs.
Positioning
The event object in IE is an attribute event of the window object. The event handler function must access the event object like this:

Copy code The code is as follows:

oDiv.onclick = function(){
var oEvent=window.event;
}

The DOM standard says that the event object must be passed to the event processing function as the only parameter. Therefore, accessing the event object in DOM-compatible browsers (such as Mozilla, Safair, Opera) is:

Copy code The code is as follows :

oDiv.onclick=function(){
var oEvent=arguments[0];
}
//or
oDiv.onclick=function(oEvent) {
}

Attribute method similarity

1. Get the event type: oEvent.type
2. Get the key code: oEvent.keyCode
3. Detect Shift, Alt, Ctrl keys: oEvent.shiftKey ;oEvent.altKey;oEvent.ctrlKey;
　4. Get the client mouse coordinates: oEvent.clientX;oEvent.clientY;
　5. Get the screen coordinates: oEvent.screenX;oEvent.screenY;

Differences in attribute methods

1. Get the target: IE uses srcElement, DOM uses target;
2. Get the key character code: IE uses keyCode, DOM uses charCode and String.fromCharCode;
3. The default behavior to prevent an event: IE uses oEvent.returnValue=false, DOM uses the preventDefault() method;
4. Stop event bubbling: Use oEvent.cancelBubble=true in IE; use oEvent.stopPropagation() in DOM ;

4. Types of events

1. Mouse events
Mouse events include click, dblclick, mousedown, mouseout, mouseover, mouseup, and mousemove.
Sequence of events: The dblclick event will trigger the following events: mousedown, mouseup, click, mousedown, mouseup, click, dblclick.
2. Keyboard events
Keyboard events include: keydown, keypress, keyup.
Sequence of events: When the user presses a character key once, the following events will be triggered successively: keydown, keypress, and keyup. If a non-character key is pressed once, the following events will be triggered successively: keydown and 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 browser has implemented it yet. Therefore they are only listed here.
Change events include: DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsteredIntoDocument.

Author: Artwl
Source: http://artwl.cnblogs.com