JS Events (event) knowledge collation [go]

1 Event Registration2 3 normally we bind events in the form of Dom.onxxxx=function () {}4 this is done by assigning a value to the element's Onxxxx property and binding only one handle handle. 5 But many times we need to bind more than one handle to an event, and we may have to dynamically delete and subtract a handle6 The following event registration method will solve this requirement. 7 8 let's introduce four methods9 Ten Copy the code code as follows: One  A  - outside//ie - Target.addeventlistener (type,listener,usecapture) the 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); A target.detachevent (type, listener); at 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); in ele.attachevent ("onclick", method3); - execution order is method3->method2->method1 to Ele.addeventlistener ("click", Method1,false); + Ele.addeventlistener ("click", Method2,false); - Ele.addeventlistener ("click", Method3,false); the execution order is method1->method2->method3 * a compatible approach $ var func = function () {};Panax Notoginseng //Example: addevent (window, "Load", func) - function addevent (elem, type, fn) { the if (elem.attachevent) { + elem.attachevent (' on ' + type, fn); A return; the }  + if (elem.addeventlistener) { - elem.addeventlistener (Type, FN, false); $ }  $ }  - //Example: removeevent (window, "Load", func) - function Removeevent (elem, type, fn) { the if (elem.detachevent) { - elem.detachevent (' on ' + type, fn);Wuyi return; the }  - if (elem.removeeventlistener) { Wu elem.removeeventlistener (Type, FN, false); - }  About }  $  -  - Gets the event object and the event source (the element that triggered the event) -  A Copy the code code as follows: +  the  - function EventHandler (e) { $ //Get Event object the E = e | | window.event;//ie and chrome under Window.event FF is e the //Get Event source the var target = E.target | | E.srcelement;//ie and chrome are under srcelement FF is target the }  -  in  theCancels the event default behavior (for example, clicking a<a>does not jump to the page but executes a function) the  About Copy the code code as follows: the  the  the function EventHandler (e) { + e = e | | window.event; - //Prevent default behavior the if (e.preventdefault) {Bayi E.preventdefault (); outside//ie the } else { the E.returnvalue = false;//ie - //Note: This place is not replaced with return false. - //return false to cancel only elements the }  the }  the  the  - Block Event bubbling the  the Copy the code code as follows: the 94  the function Myparagrapheventhandler (e) { the e = e | | window.event; the if (e.stoppropagation) {98 e.stoppropagation (); outside//ie About } else { - e.cancelbubble = true;//ie101 } 102 } 103 104  the 106 Event Delegate107 108For example, you have a large table with a lot of rows, in each<TR>Binding a point-and-click event is a very dangerous idea because performance is a big problem. The popular practice is to use event delegates. 109  the 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. 111 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 113  the Copy the code code as follows: the  the 117 Mytable.onclick = function () {118 e = e | | window.event;119 var targetnode = E.target | | e.srcelement; - //test if the click of TR is triggered121 if (targetNode.nodeName.toLowerCase () = = = ' tr ') {122 alert (' You clicked a table row! ');123 } 124 }  the 126 127  - Events (Event) knowledge Collation (ii)129  the Event Flow131  the DOM supports both event models: capture-type and bubbling-type events133 and every time an event occurs, it passes through the stage of the capture phase--processing phase (some browsers do not support capture)134 135 The capture phase is the order of the upper-level elements to the underlying elements. And the bubbling phase is the opposite. 136 137 as138 139  $ 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. 141 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. 142 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). 143 in this process, you can block the bubbling of events, that is, to stop the upward passing. 144 It is sometimes necessary to stop bubbling, for example145 146 147 Copy the code code as follows:148 149  Max <Divonclick=funca ()> 151 <Buttononclick=FUNCB ()>Click</Button>  the </Div> 153 154 155 156 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. 157If you block bubbling in the event handle of a button, the DIV does not execute the event handle.

JS Events (event) knowledge collation [go]