JS Learning Five (JS in the event)

[Event Classification in JS]
1. Mouse Events
Click/bdlclick/onmouseover/onmouseout

2. HTML Events
Onload/onscroll/onsubmit/onchange/onfocus

3. Keyboard Events
KeyDown: Triggered when the keyboard is pressed
keypress: Instant trigger when keyboard is pressed and released
KeyUp: Triggered when the keyboard is lifted

[Precautions]
① Execution Order: Keydown-->keypress-->keyup
② when long on time, will loop to execute keydown-->keypress
③ There is keydown does not necessarily have KeyUp, when the event trigger process, the mouse will move the cursor, will cause no keyup
④keypress can only capture numbers, letters, and symbol keys on the keyboard, and cannot capture various function keys, while KeyDown and KeyUp
⑤keypress supports case sensitivity, KeyDown and KeyUp do not support

Document.onkeydown = function () {
Console.log ("onkeydown");
}
document.onkeypress = function () {
Console.log ("onkeypress");
}
document.onkeyup = function () {
Console.log ("onkeyup");
}

[OK button to trigger]
① in the triggered function, pass in a parameter E, indicating the keyboard event
② uses E.keycode, takes the ASCII code value of the key, and then determines the trigger button;
③ compatibility of all browsers (not normally required):
var evn = e | | event;
var code = Evn.keycode | | evn.which | | evn.charcode;

[How to determine the combination of keys]
var isent = False,isalt = false;
Document.onkeydown = function (e) {
if (E.keycode = =) Isent = true;
if (E.keycode = =) Isalt = true;

if (isent = = True && Isalt = = True) {
console.log ("You pressed ALT + enter");
}
}
Document.onkeyup = function (e) {
if (E.keycode = =) Isent = false;
if (E.keycode = =) Isalt = false;
}

[DOM0 event model in JS ]
1, inline model (inline binding): The function name directly as an attribute value of an event attribute of an HTML tag;
Eg:<button onclick= "func ()" >dom0 Inline model </button>
Advantages: Easy to use.
Cons: Violate the basic principles of HTML and JavaScript separation;

2, the script model (dynamic binding): In the JS script, take a node, and add the event properties;
eg:window.onload = function () {}
Pros: HTML and JavaScript are separated.
disadvantage: The same node can only bind one type of event. If the binding is multiple, the last one takes effect.


[DOM2 event Model]
1, Add Event binding method:
① before IE8: Btn.attachevent ("click", function);
② Other browsers: Btn.addeventlistener ("click", Function, true/false);

parameter three: false (default) indicates event bubbling
true to indicate event capture
③ compatible notation: if (btn2.attachevent) {
btn2.attachevent ();
}else{
Btn2.addeventlistener ();
}
2, Advantages: ① can give the same node, add more than one type of event;
② provides functions that can cancel event binding;

3. Cancel the DOM2 event binding:
Note: If you want to cancel the DOM2 event binding, the handler must use the named function instead of the anonymous function when binding the event.
Btn2.removeeventlistener ("click", Func2);
btn2.detachevent ("onclick", Func2);

"stream of events in JS"
1. Event bubbling : When a DOM element triggers an event, it starts at the current node and increments the same type of event that triggers its ancestor node.
until the DOM root node;
what happens when event bubbling occurs?
①DOM0 Model binding events, all of which are bubbling;
before ②IE8, the events that were bound with the attachevent () were all bubbling;
③ Other browsers that use events added by AddEventListener, when the third argument is omitted or false, bubbles the event.

2. Event capture : When a DOM element triggers an event, it starts from the document node and chufa down to its ancestor node's similar event until the node itself;

what happens when event capture is triggered?
① uses AddEventListener to add an event, and when the third argument is true, the event is captured;

↓dom root node ↑
↓↑
Catch Grandpa Node
↓↑
parent Node Bubble
↓↑
↓ Current node ↑
3. Block event bubbling
used in Internet Explorer: E.cancelbubble = true;
used in other browsers: E.stoppropagation ();
compatible with other browsers:
function Myparagrapheventhandler (e) {
e = e | | window.event;
if (e.stoppropagation) {
e.stoppropagation (); outside//ie
} else {
e.cancelbubble = true;//ie8 before
}
}
☆ 4, cancel the event default behavior:
used in Internet Explorer: E.returnvalue = false;
used in other browsers: E.preventdefault ();

compatible with other browsers:
function EventHandler (e) {
e = e | | window.event;
//Prevent default behavior
if (e.preventdefault) {
E.preventdefault (); outside//ie
} else {
E.returnvalue = false;//ie
}
}

JS Learning Five (JS in the event)