Events (event) knowledge collation, this article from the online data collation, the need for friends can refer to the next
Mouse Events
The moment the mouse moves to the target element, the first trigger mouseover
Then, if the cursor continues to move on the element, the MouseMove is constantly triggered
If you press the device on the mouse (left button, right button, wheel ...), Trigger MouseDown
Trigger MouseUp when the device bounces
When the scrollbar of the target element is moved (scroll wheel/drag scroll bar ...) ) Trigger Scroll
Rolling wheel trigger MouseWheel, this is different from scroll
The moment the mouse moves out of the element, triggers the mouseout
Event Registration
Normally we bind events in the form of Dom.onxxxx=function () {}
This is done by assigning a value to the element's Onxxxx property and binding only one handle handle.
But many times we need to bind more than one handle to an event, and we may have to dynamically delete and subtract a handle
The following event registration method will solve this requirement.
let's introduce four methods
The code is as follows:
Outside IE
Target.addeventlistener (Type,listener,usecapture)
Target.removeeventlistener (type,listener,usecapture);
Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, without "on", such as "click", "MouseOver", "KeyDown" and so on.
Listener: Implements a EventListener interface or a function in JavaScript.
Usecapture: Whether to use snapping, generally with false.
Ie
Target.attachevent (type, listener);
Target.detachevent (type, listener);
Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", "onkeydown" and so on.
Listener: Implements a EventListener interface or a function in JavaScript.
The principle of the use of both: the execution of the priority is different, the example is explained as follows:
Ele.attachevent ("onclick", method1);
Ele.attachevent ("onclick", method2);
Ele.attachevent ("onclick", method3);
Execution order is METHOD3->METHOD2->METHOD1
Ele.addeventlistener ("click", Method1,false);
Ele.addeventlistener ("click", Method2,false);
Ele.addeventlistener ("click", Method3,false);
Execution order is method1->method2->method3
A compatible approach
var func = function () {};
Example: addevent (window, "Load", func)
function addevent (elem, type, fn) {
if (elem.attachevent) {
Elem.attachevent (' on ' + type, fn);
Return
}
if (Elem.addeventlistener) {
Elem.addeventlistener (Type, FN, false);
}
}
Example: removeevent (window, "Load", func)
function removeevent (elem, type, fn) {
if (elem.detachevent) {
Elem.detachevent (' on ' + type, fn);
Return
}
if (Elem.removeeventlistener) {
Elem.removeeventlistener (Type, FN, false);
}
}
Gets the event object and the event source (the element that triggered the event)The code is as follows:
function EventHandler (e) {
Get Event Object
E = e | | Window.event;//ie and Chrome are under window.event FF is E
Get Event Source
var target = E.target | | E.srcelement;//ie and Chrome are under srcelement FF is target
}
cancels the event default behavior (for example, clicking a <a> does not jump to a page but executes a function)
The code is as follows:
function EventHandler (e) {
E = e | | window.event;
Prevent default behavior
if (E.preventdefault) {
E.preventdefault (); outside//ie
} else {
E.returnvalue = false;//ie
Note: This place is not replaced with return false.
Return false can only cancel elements
}
}
Block Event bubbling
The code is as follows:
function Myparagrapheventhandler (e) {
E = e | | window.event;
if (e.stoppropagation) {
E.stoppropagation (); outside//ie
} else {
E.cancelbubble = true;//ie
}
}
Event Delegate
For example, you have a large table with a lot of rows, and at each <tr> tie-point event is a very dangerous idea because performance is a big problem. The popular practice is to use event delegates.
An event delegate describes an event that is bound to a container element and then triggered by judging the type of the target child element that is clicked.
The event delegate relies on event bubbling, and the following code will not work if it is disabled before the event bubbles to the table.
The code is as follows:
Mytable.onclick = function () {
E = e | | window.event;
var TargetNode = E.target | | E.srcelement;
Test if you click on TR to trigger
if (targetNode.nodeName.toLowerCase () = = = ' tr ') {
Alert (' You clicked a table row! ');
}
}
Events (event) knowledge Collation (ii)
Event Flow
DOM supports both event models: capture-type and bubbling-type events
And every time an event occurs, it passes through the stage of the capture phase--processing phase (some browsers do not support capture)
The capture phase is the order of the upper-level elements to the underlying elements. And the bubbling phase is the opposite.
Such as
When the event is triggered, the body gets the information that has the event, and then passes down in turn until the most detailed element is reached. This is the event capture phase.
Remember the event registration method Ele.addeventlistener (Type,handler,flag), Flag is a Boolean value, True indicates event capture phase execution, and False indicates event bubbling phase execution.
Then there is the event bubbling phase. Executes the event handler from the bottom up (assuming, of course, that the current element has registered an event handle for the event).
In this process, you can block the bubbling of events, that is, to stop the upward passing.
It is sometimes necessary to stop bubbling, for example
The code is as follows:
<div Onclick=funca () >
<button ONCLICK=FUNCB () >Click</button>
</div>
The intent is to execute Funca when you click a button other than the one in the Div, and FUNCB when you click button. However, the actual click button will be executed successively Funcb,funca.
If you block bubbling in the event handle of a button, the DIV does not execute the event handle.
JS Events (event) Knowledge collation
