js event (Event) knowledge compilation_javascript skills

Mouse event

The moment the mouse moves to the target element, mouseover is first triggered
and then if the cursor continues to move on the element, mousemove is continuously triggered
if the mouse is pressed on the device (left button, right button, scroll wheel...), mousedown is triggered
Mouseup is triggered when the device pops up
When the scroll bar of the target element moves (roll the wheel/drag the scroll bar...) Trigger scroll
The scroll wheel triggers mousewheel. This is different from scroll
The moment the mouse moves out of the element, trigger mouseout

Event registration

Usually we bind When specifying an event, use the form dom.onxxxx=function(){}
This method assigns a value to the onxxxx attribute of the element and can only bind one processing handle.
But many times 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 need.

First introduce the four methods

Copy the code The code is as follows:

//Except 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", "keydown", etc.
listener: implements the EventListener interface or a function in JavaScript.
useCapture: Whether to use capture, usually false.
//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", "onkeydown", etc.
listener: implements the EventListener interface or a function in JavaScript.
The principle of using the two: they can have different execution priorities. The examples are explained as follows:
ele.attachEvent("onclick",method1);
ele.attachEvent("onclick",method2);
ele.attachEvent("onclick",method3);
The execution order is method3->method2->method1
ele.addEventListener("click",method1,false);
ele. addEventListener("click",method2,false);
ele.addEventListener("click",method3,false);
The execution order 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);
}
}

Get the event object and event source (the element that triggered the event)

Copy code The code is as follows:

function eventHandler(e){
//Get the event object
e = e || window.event;//Under IE and Chrome It is window.event. Under FF, it is e
//Get the event source
var target = e.target || e.srcElement;//It is srcElement under IE and Chrome. Under FF, it is target
}

Cancel the default behavior of the event (for example, after clicking an , the page will not jump but a function will be executed)

Copy the code 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
which cannot be replaced by return false //return false can only cancel the element
}
}

Prevent event bubbling

Copy code The code is as follows:

function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();//Except IE
} else {
e.cancelBubble = true;//IE
}
}

Event Delegate

For example, if you have a large table with many rows, binding a click event to each is a very dangerous idea, because Performance is a big issue. A popular approach is to use event delegation.

Event delegation describes binding the event to the container element, and then triggering the corresponding event by determining the type of the clicked target sub-element.
Event delegation relies on event bubbling. If the event is disabled before bubbling to the table, the following code will not work.

Copy code The code is as follows:

myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// Test if TR is clicked, it will trigger
if (targetNode.nodeName.toLowerCase( ) === 'tr') {
alert('You clicked a table row!');
}
}

Event knowledge compilation (2)

Event flow

DOM supports two event models at the same time: capturing events and bubbling events
and whenever an event occurs , will all go through the capture phase -> processing phase -> bubbling phase (some browsers do not support capture)

The capture phase is in order from the upper element to the lower element. The bubbling stage is just the opposite.

As shown below


When the event is triggered, the body will first get the information that the event occurred, and then pass it down in sequence until it reaches the most detailed element. This is the event capture phase.
Remember the event registration method ele.addEventListener(type, handler, flag). Flag is a Boolean value. true means execution in the event capture phase, false means execution in the event bubbling phase.
Then comes the event bubbling stage. Execute the event processing functions in sequence from bottom to top (of course, the premise is that the current element has registered an event handler for the event).
In this process, you can prevent the bubbling of events, that is, stop the upward transmission.
It is sometimes necessary to prevent bubbling, for example

Copy code The code is as follows:

Click

The original intention is that funcA will be executed when a position other than the button in the div is clicked, and funcB will be executed when the button is clicked. But when the button is actually clicked, funcB and funcA will be executed successively.
If bubbling is prevented in the button's event handler, the div will not execute the event handler.