Js Event knowledge sorting

Mouse events

When you move the mouse over the target element, mouseover is triggered first.
Then, if the cursor continues to move on the element, mousemove will be triggered continuously.
If you press the device (left click, right click, scroll wheel ......), Mousedown is triggered.
Trigger mouseup when the device is up
When the scroll bar of the target element is moved (scroll wheel/drag the scroll bar ..) Trigger scroll
The scroll wheel triggers mousewheel, which is different from scroll.
The moment when the mouse moves the element, the mouseout is triggered.

Event registration

We usually use dom. onxxxx = function () {} when binding events.
This method assigns a value to the onxxxx attribute of the element and can only bind one processing handle.
However, in many cases, we need to bind multiple processing handles to an event, and we may also need to dynamically add or delete a processing handle.
The following event registration method can solve this problem.

First, we will introduce four methods. Copy codeThe Code is as follows: // outside of IE
Target. addEventListener (type, listener, useCapture)
Target. removeEventListener (type, listener, useCapture );
Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "mouseover", and "keydown.
Listener: implements the EventListener interface or functions in JavaScript.
UseCapture: whether to use capture. Generally, false is used.
// IE
Target. attachEvent (type, listener );
Target. detachEvent (type, listener );
Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", and "onkeydown.
Listener: implements the EventListener interface or functions in JavaScript.
The usage principle of the two is as follows: the execution priority can be different. The example is as follows:
Ele. attachEvent ("onclick", method1 );
Ele. attachEvent ("onclick", method2 );
Ele. attachEvent ("onclick", method3 );
The execution sequence is method3-> method2-> method1
Ele. addEventListener ("click", method1, false );
Ele. addEventListener ("click", method2, false );
Ele. addEventListener ("click", method3, false );
The execution sequence is method1-> method2-> method3
Compatible methods
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 );
}
}

Obtain the event object and event source (the element that triggers the event)
Copy codeThe Code is as follows: function eventHandler (e ){
// Obtain the event object
E = e | window. event; // in IE and Chrome, it is in window. event FF and e.
// Obtain the event Source
Var target = e.tar get | e. srcElement; // srcElement FF and target in IE and Chrome
}

Cancel the default event behavior (for example, click a <a> button to execute a function instead of redirecting to the page)
Copy codeThe Code is as follows: function eventHandler (e ){
E = e | window. event;
// Prevent default behavior
If (e. preventDefault ){
E. preventDefault (); // other than IE
} Else {
E. returnValue = false; // IE
// Note: return false cannot be used in this case.
// Return false: only elements can be canceled.
}
}

Prevent event bubbles
Copy codeThe Code is as follows: function myParagraphEventHandler (e ){
E = e | window. event;
If (e. stopPropagation ){
E. stopPropagation (); // other than IE
} Else {
E. cancelBubble = true; // IE
}
}

Event Delegate

For example, if you have a large table with many rows, binding click events on each <tr> is a very dangerous idea, because performance is a big problem. The popular practice is to use event delegation.

The event Delegate describes how to bind an event to a container element, and then trigger an event by judging the type of the target sub-element to be clicked.
Event delegation depends on Event bubbling. If the event is disabled before the event bubbles to the table, the following code cannot work.

Copy codeThe Code is as follows: myTable. onclick = function (){
E = e | window. event;
Var targetNode = e.tar get | e. srcElement;
// Test if TR is clicked.
If (targetNode. nodeName. toLowerCase () === 'tr '){
Alert ('You clicked a table row! ');
}
}

Event knowledge sorting (2)

Event stream

DOM supports both capture and bubble event models.
When an event occurs, it goes through the capture phase-> processing phase-> bubble phase (Some browsers do not support capturing)

The capture phase is the sequence from upper-layer elements to lower-layer elements. The bubble stage is the opposite.

For example

When an event is triggered, the body will first obtain information about the event, and then pass it down sequentially until it reaches the most detailed element. This is the event capture stage.
Remember the event registration method ele. addEventListener (type, handler, flag). Flag is a Boolean value. true indicates that the event capture stage is executed, and false indicates that the event is executed in the bubble stage.
The next step is the event bubble stage. Execute the event processing function sequentially from the bottom up (the premise is that the current element registers the event handle for the event ).
In this process, you can prevent event bubbles, that is, stop upward transmission.
It is sometimes necessary to prevent bubbles, such

Copy codeThe Code is as follows: <div onclick = funcA ()>
<Button onclick = funcB ()> Click </button>
</Div>

If you execute funcA when you click a position other than the button in the div, then execute funcB when you click the button. However, when you click the button, funcB and funcA are executed successively.
If the event handle of the button is used to prevent bubbling, The div will not execute the event handle.