Home > Developer > Web Develop
1. Mouse events:
Click/dbclick/mouseover/mouseout
2.HTML Event:
Onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll
3. Keyboard events:
KeyDown: Triggered when the keyboard is pressed
KeyPress: The moment the keyboard presses and lifts.
KeyUp: Keyboard lift Trigger
[Precautions]
① Execution Order: KeyDown keypress KeyUp
②keypress can only capture numbers, letters, symbolic keys, and cannot capture function keys.
③ long-time loop execution keydown--keypress
④ have KeyDown, and there is not necessarily keyup, when the long time focus loses, will no longer trigger KeyUp
⑤keypress are case-sensitive, keydown,kewup are not differentiated.
4. Event factor:
When an event is triggered, the event is passed to the function called by the event, by default, to a parameter,
This parameter is an event factor that contains various details about the event.
document.onkeydown=function(e) {console.log (e);}document.onkeydown=function() {console.log (window.event);}// compatible browser notation:document.onkeydown=function(e) {e==e| | window.event; var code=e.keycode| | e.which| | E.charcode; if (code==13) {// enter }}5. How do I determine the keyboard keys?
① the function that starts again, receives the event factor E.
② can use E.key to go directly to the pressed key character (not recommended).
③ an ASCII value that can be taken to the key at a time using Keycode/which/charcode.
(compatible with various browser wording)
var code=e.keycode| | e.which| | E.charcode;
// Judging key Combinations var isalt=0,isent=0;d ocument.onkeyup=function(e) {if(e.keycode==18 ) {Isalt=1;} if (e.keycode==13) {isent=1;} if (Isalt==1&&isent==1) {alert ("Press ALT and enter at the same time");}} document.onkeyup=function () {Console.log ( "KeyUp" =function () { Console.log ( "keypress" =function () { Console.log ( "KeyDown" =function () { Console.log (window.event);} // determine if the ENTER key is pressed document.onkeydown=function(e) {var code=E.keycode; if (code==13) {alert ("you entered enter");}}Binding considerations:
① is bound after loading with window.onload.
Window.onload =function() {// Event}② is placed behind the body to bind.
// body Content <body> <button onclick= "func ()" > Inline model Binding </button> <button id= "BTN1" > Ha ha </button> <button id= "BTN2" >dom2 model bindings </button> <button id= "Btn3" > Cancel DOM2 </button></body>
1. Inline model (inline binding): The function name is used directly as the property value of the attribute in the HTML tag.
<button onclick= "func ()" > Inline model Binding </button>
Disadvantage: It does not conform to the basic norms of content and behavior separation.
2. Script model (Dynamic Binding): By selecting a node in JS and then adding the onclick attribute to the node.
document.getElementById ("btn1") =function() {}Advantages: Conform to the basic norms of content and behavior separation, and realize the separation of HTML and JS.
Disadvantage: The same node can only be added once for the same type of event, if added multiple times, the last one takes effect.
document.getElementById ("Btn1"). onclick=function() { alert (1234); } document.getElementById ("btn1"). onclick=function() { alert (234); } // only the most recent occurrence of duplicates3.dom0 Common disadvantage: Through DOM0 bound events, once the binding cannot be canceled.
document.getElementById ("Btn3"). onclick=function () {// cannot cancel anonymous functions if( btn.detachevent) { btn.detachevent ("onclick", func1); } Else { Btn.removeeventlistener ("click", Func1); } Alert ("Cancel DOM2");}1. Add DOM2 Event Bindings:
Before ①IE8, use. attachevent ("onclick", function);
After ②ie8, use. AddEventListener ("Click", Function, True/false);
Parameter three: false (default) indicates event bubbling, and passing in true indicates event capture.
③ is compatible with all browsers:
var btn=document.getelementbyid ("btn1"if(btn.attachevent) {btn.attachevent (" OnClick ", func1); // event, the function that the event needs to execute IE8 can } Else { Btn.attacheventlistener ("click", Func1);}Advantages of 2.DOM2 Binding:
① the same node, you can use DOM2 to bind more than one type of event.
② uses DOM2-bound events and can have special functions to cancel them.
3. Cancel Event Binding:
① use attachevent binding, to cancel with detachevent.
② use Attacheventlistener binding, to cancel with Removeeventlistenter.
Note: If DOM2 binds an event that needs to be canceled, the callback function must be the function name when the event is bound.
Instead of being an anonymous function, canceling an incoming function name cancels when the event is canceled.
1. Event bubbling (fasle/not written): When the event that triggers a node is, it starts from the current node, triggering the same type of event of its ancestor node, in turn, until the DOM root node.
2. Event Capture (True): When an event of a node is originally sent, it starts from the DOM root node, triggering the same type of event for its ancestor node, until the current node itself.
3. When does the event bubble? When did event capture happen?
① when a AddEventListener binding event is used, the third parameter is passed as true to indicate event capture;
② All event bindings are event bubbling.
4. Block Event bubbling:
before ①ie10, e.cancelbubble = true;
after ②ie10, e.stoppropagation ();
5. Block Default events:
before ①ie10: E.returnvalue = false;
after ②ie10: E.preventdefault ();
// CSS #div1 { width:300px;; height:300px; Background-color:powderblue;} #div2 { width:200px; height:200px; Background-color:deeppink;} #div3 { width:100px; height:100px; Background-color: #A9A9A9;}// HTML<div id= "Div1" > <div id= "Div2" > <div id= "Div3" ></div> </ Div></div><a href= "01-event notes. html" onclick= "func ()" > Hyperlinks </a>
Div1.addeventlistener ("click", function () {Console.log ( div1 click false );d Iv2.addeventlistener ( "click", function () {Console.log ( "Div2 click" false );d Iv3.addeventlistener ( " Click ", function () {// The original order is: 3-->2-->1. // Myparagrapheventhandler ();//after intercepting the stream of events, Trigger only 3. But it will still bubble from 2 onwards; console.log ("Div3 click" false ); Results (event bubbling) (from small to large div3-"div2-" Div1):
Div1.addeventlistener ("click",function() { console.log ("Div1 click");},True );d iv2.addeventlistener ("click",function() { console.log ("Div2 click");} ,true);d iv3.addeventlistener ("click",function// Myparagrapheventhandler ();//intercepts the event stream, triggering only 3. But it still bubbles from 2, console.log ("Div3 click");}, true);Results (event capture) (from small to large div3-"div2-" Div1):
// still follows event bubbling document.onclick=function() { console.log ("document Click")} // Intercept event Stream block event bubbling function Myparagrapheventhandler (e) {e = e | | window.event; if (e.stoppropagation) {E.stoppropagatio N (); // ie10 after } else {e.cancelbubble = true; // ie10 before }} // Intercept event Stream block event bubbling function Myparagrapheventhandler (e) {e = e | | window.event; if (e.stoppropagation) {E.stoppropagatio N (); // ie10 after } else {e.cancelbubble = true; // ie10 before }} // Block Default Events function EventHandler (e) { = e | | window.event; // if (e.preventdefault) { //IE10 after else { false//IE10 }}JS's event binding, event flow model
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
