Events in JavaScript

the events in JS

I. Classification of events:

Mouse events: mouse clicks, mouse double-click, mouse refers to the upper ...

HTML Events: Document loading, focus, form submission, etc...

Keyboard events: Keyboard pressed (KeyDown), keyboard pressed and released instantly (keypress), keyboard lifted (KeyUp)

Today we mainly share the keyboard event??

1. 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, characters, 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

2, determine the trigger button

① in the triggered function, pass in a parameter E, which indicates a keyboard event,
② uses E.keycode to take the ASCII code value of the key to determine the trigger button
③ compatibility of all browsers (not normally required)
　　　　var evn = e | | Event
var code = Evn.keycode | | Evn.ehich | | Evn.charcode

The keyboard presses the code example:

Results:

Second, DOM0 event model

1. Inline model (inline binding): The property value of an event property that directly takes the function name as an HTML tag:
eg:<button onclick= "func ()" >dom inline model </button>
Advantages: Easy to use
Cons: Violating the general 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 () {}
Advantages: The separation between HTML and JavaScript is realized;
disadvantage: The same node can only bind one type of event, if binding multiple times, the last one takes effect.

Three, DOM2 event model
1, Add Event binding method:
before ①IE8: variable name. attachevent ("Onclock", function);
② Other browsers: variable name. AddEventListener ("Click", Function, Ture/false);
parameter three: false (default) indicates event bubbling true indicates event capture
compatible with all browser wording:

if (btn.attachevent) {　　
variable name. attachevent ();
}else{
variable name. AddEventListener ();
}

2. Advantages:
① can give the same node, add more than one type of event;
② provides functions that can cancel event binding.

3. Cancel 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.
variable name. RemoveEventListener ("click", Func2); 　　
variable name. DetachEvent ("onclick", Func2);

the stream of events in JS

The event flow is divided into three parts. The first part is called the capture phase, which includes all nodes from the stage to the parent node of the target node. The second part is called the target phase, which includes only the target node. The third part is called the bubbling phase. The bubbling phase includes the nodes that are encountered in the journey back to the stage from the parent node of the target node.

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 the ancestor node, until the DOM root node.
What happens when event bubbling occurs:
①DOM0 binding events, all of them are bubbling;
Before ②IE8, the events that were bound with the arrachevent () were all bubbling;
③ other browsers, use Addevevtlinstener to add events when the third argument is omitted or false for the bubbling event.

2. Event Capture:
When a DOM element triggers an event, it starts at the document root node, triggering the same type of event for its ancestor node, until the node itself
What happens when event capture occurs:
Use Addevevtlinstener to add an event, and when the third argument is true, the event is captured.

3. Block Event bubbling:
In Internet Explorer, use e.cancelbubble = true;
In other browsers, use E.stoppropagation ();
Compatible with all browsers:

4. Cancel the event default behavior:

Developers are usually responsible for writing code that responds to events. In some cases, however, the behavior is usually associated with an event, which causes Flash Player or AIR to perform the behavior automatically unless the developer adds code that cancels the behavior. Because Flash Player or AIR automatically behaves like this, this behavior is called the default behavior. For example, click the Jump page event for the:<a> tab.
In Internet Explorer, use e.cancelbubble = true;
In other browsers, use E. stoppropagation ();
Compatible with all browsers:

Attach how to determine the key combination code:

<Scripttype= "Text/javascript">    //Judging combination keys    varisent= false; varIsalt= false; Document.onkeydown= function(e) {if(E.keycode== -) Isent= true; if(E.keycode== -) Isalt= true; if(Isent==true &&Isalt==true) {Console.log ("you pressed the ALT + passing key"); }} Document.onkeyup= function(e) {if(E.keycode== -) Isent= false; if(E.keycode== -) Isalt= false; }</Script>

Events in JavaScript