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.
//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)
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 }
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 } }
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.
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
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.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn