Event Model in JavaScript

Events in JS

1. Mouse events

onclick ondbclick onmouseover onmouseout

2. HTML events

onload onunload onsubmit onresize onfocus onchange onscroll

3. Keyboard events

onkeydown: fires when the keyboard is down
onkeypress: Triggered when the keyboard is pressed and lifted
onkeyup: Triggered when the keyboard is up

【Precautions】

① Execution order: keydown--keypress--keyup
② keypress can only capture number, letter, symbol keys, not function keys;
③ Cycle execution when long press: keydown--keypress
④ There is keydown, not necessarily keyup. When the focus is lost during long press, keyup is no longer triggered.
⑤ keypress is case sensitive, keydown/keyup is not case sensitive

4. Event factor

When an event is triggered, the event will pass a parameter to the function called by the event by default. This parameter is the event factor, which contains various details of the event.

1 document.onkeydown=function(e){ 
2   console.log(e);
3 }

5. How to determine the keyboard keys

① In the trigger function, receive the event factor e

e = e || window.event;

② You can use e.key to directly get the pressed key character (not recommended)
③ You can use keyCode/which/charCode to get the ASCII code value of the key:

1  var code=e.keyCode || e.which || e.charCode;
 2  //(Compatible with various browsers) 
 3  document.onkeydown=function(e){
 4     e = e || window.event; 
 5     var code=e.keyCode || e.which || e.charCode;
 6     console.log(e); 
 7 }

DOM0 event model

1. Inline model binding (inline binding)

Use the function name directly as the attribute value of the event attribute in the HTML tag

 < button onclick ="func()" > inline model binding </ button >

Disadvantage: does not meet the basic specification of the separation of content and behavior in w3c

2. Script model (dynamic binding)

By selecting a node in js, and then adding the onclick attribute to the node

document.getElementById("btn1").onclick=function(){}

Advantages: It conforms to the basic specification of separation of content and behavior in w3c, and realizes the separation of html and js

Disadvantages: The same node can only add events of the same type once. If added multiple times, the last one will take effect .

3. Common disadvantages of DOM0:

Events bound through DOM0, once bound, cannot be cancelled

DOM2 event model

1. Add DOM2 event binding

① Before IE8, use .attachEvent("onclick", function);
② After IE8, use .addEventListener("click", function, true/false);
parameter 3: false (default) means event bubbling, pass in true Indicates event capture
③ Compatible with all browser processing methods

1 var btn = document.getElementById("btn2");
2 if(btn.attachEvent) {
3       btn.attachEvent("onclick", func1);
4     } else {
5       btn.addEventListener("click", func1);
6 }

2. Advantages of DOM2:

① For the same node, you can use DOM2 to bind multiple events of the same type
② For events bound by DOM2, there is a special function to cancel

3.DOM2 cancel event binding:

① Bind with attachEvent, cancel with detachEvent("onclick", func1);
② Bind with addEventListenner, cancel with removeEventListener("click", func1);

1 document.getElementById("btn3").onclick=function() {
2 if(btn.detachEvent) {
3        btn.detachEvent("onclick", func1);
4     } else {
5        btn.removeEventListener("click", func1);
6     }
7     alert("取消事件绑定");
8 }

Note: If the event bound by DOM2 needs to be canceled, when binding the event, the callback function must be the function name, not an anonymous function, because when canceling the event, cancel the incoming function name for binding

event flow model in js

1. Event bubbling:

When an event of a node is triggered, it will start from the current node and trigger the same type of events of its ancestors in turn, until the root node of the DOM.

2. Event capture

When an event of a node is triggered, it will start from the DOM root node and trigger the same type of events of its ancestor nodes in turn, knowing the current node itself.

3. When do events bubble up? event capture?
①When using addEventListener to bind events, the third parameter is set to true, which means event capture
②All other events are event bubbling
4. Prevent event bubbling
①Before IE10, use e.cancelBubble = true;
②After IE10 , using e.stopPropagation();

1 function myParagraphEventHandler(e) {
2     e = e || window.event;
3     if (e.stopPropagation) {
4          e.stopPropagation(); //IE10之后 
5     } else {
6          e.cancelBubble = true; //IE10之前
7     }
8 }

5. Block the default event
①Before IE10: e.returnValue = false;
②After IE10: e.stopPropagation();

1  function eventHandler(e) {
 2    e = e || window.event;
 3    // prevent default behavior 
 4    if (e.preventDefault) {
 5         e.preventDefault(); //except IE10 
 6     }else {
 7        e. returnValue = false; //before IE10 
 8     }
 9 }