Introduction to Java Part 6: Events of Java script (js)

[Event classification in js]

 
 1. Mouse events  

 
  　　onclick、ondbclick、onmouseover、onmouseout 等
  

 
 2.HTML events: 

 
  　　onload/onunload/onsubmit/onresize/onfocus/onchange/onscroll
  

 
 3. Keyboard events: 

 
  　　1.keydown: keyboard down;
  

 
  　　2.keypress: the moment the keyboard is lifted after being pressed;
  

 
  　　3.keyup: the keyboard is lifted;
  

 
 　　[Precautions] 

 
  　　　　1. Execution sequence keydown-keypress-keyup
  

 
  　　　　2.keypress can only capture letter, number, symbol keys, but not function keys.
  

 
  　　　　3. Execute keydown-keypress in a loop when long press;
  

 
  　　　　4. There is keydown, but not necessarily keyup. When the focus is lost when long-pressed, keyup is no longer triggered.
  

 
  　　　　5.keypress is case sensitive, keydown and keyup are not.
  

 
Event factor, when an event is triggered, the event will pass in a meal and lodging by default to the function called by the event. This parameter is the time factor, which contains various detailed information of the event.
  

 
document.onkeydown = function(e){
　　console.log(e);
}
 
document.onkeydown = function(){
　　console.log(window.event)
}
 
document.onkeydown = function(e){
　　e = e || window. event
　　console.log(e);
} (compatible notation)

  5.如何确定键盘按键？
  

  　　1.在触发的函数中，接受事件因子e。
  

  　　2.可以使用e.key直接取到按下的按键字符。(不推荐使用)
  

  　　3.可以使用 keyCode/which/charCode 取到按键的ASCII码值；
  

  　　var code= e.keyCode|| e.which || e.charCode (兼容各种浏览器的写法。)
  

  　　如何确定组合键？
  

var isAlt=0; isEnt=0;
 
document.onkeydown =fuction(e){
　　if(e.keycode==18){
　　　　isAlt=1;
　　}
　　if(e.keycode==13){
　　　　isEnt=1;
　　}
　　if(isAlt==1&&isEnt==1){
　　　　console.log("同时按下")
　　}
}
document.onkeyup =fuction(e){
　　if(e.keycode==18){
　　　　isAlt=0;
　　}
　　if(e.keycode==13){
　　　　isEnt=0;
　　}
 
}

 
  【DOM0事件模型】 
 
   1.内联模型(内联绑定):
   
   　　将函数名直接作为HTML标签中事件属性的属性值。
   
   　　缺点:不符合W3C中关于内容与行为分离的基本规范。
   
   2.脚本模型(动态绑定)
   
   　　通过在js中选定某个节点，然后给节点添加onclick属性，
   
   document.getElementById("jb").onclick = function(){
 　　alert(123);
 } 
 
   　　优点: 符合W3C中内容与行为分离的基本规范。
   
   　　缺点: 同一个节点，只能添加一次同一类事件。如果添加多次，后来者生效。
   
   3.DOM0 共有缺点:通过DOM0绑定的事件，一旦绑定无法取消。
   
  【DOM2事件绑定】  
 
   　　1.添加DOM2事件绑定:
   
   　　　　1. IE8之前，使用.attachEvent("onclick",函数)；
   
   　　　　2. IE8之后，使用.addEventListener("click",函数)；
   
   　　　　3.传入参数三 :false(默认)表示时间冒泡；传入true表示时间捕获。
   
   2.DOM2绑定的优点：
   
   　　1.同一节点，可绑定多个同一类事件。
   
   　　2.使用DOM2事件，可以用特有函数进行事件取消。
   
   3.DOM2取消事件绑定:
   
   　　1.detachEvent("onclick",函数名): 取消attachEvent绑定的事件。
   
   　　2.removeEventlistener("click",函数名): 取消addEventlistener绑定的事件。
   
   　　!!!!注意，如果时间需要取消，那么传入的函数不能是匿名函数，取消时 第二个函数需要传入函数名。
   
  【事件流模型】 
 
   　　1.事件冒泡: 当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
   
   　　2.事件捕获: 当触发一个节点的事件时，会从DOM根节点开始，依次触发捕获节点的同类型事件，然后再触发冒泡事件。
   
   　　3.什么时候时间冒泡? 什么时候时间捕获？
   
   　　当使用addEventlistener 第三个参数设为true，表示事件捕获，
   
   　　除此之外的所有事件绑定，均为事件冒泡。
   
   　　4. 阻止事件冒泡的传递:
   
  function stopnextmaopao(e){
　　e= e||window.Event;
　　if(e.stopPropagation){
　　　　e.stopPropagation(); //IE 10之后
　　}else{
　　　　e.cancelBubble = true; //IE10及以前
　　}
} 
 
   5.阻止默认行为。
   
  function eventHandler(e) { // 防止默认行为
　　e = e || window.event;
　　　if (e.preventDefault) {
　　　　e.preventDefault(); //IE10之后
　　} else {
　　　　e.returnValue = false; //IE10之前
　　}
}

Introduction to Java Part 6: Events of Java script (js)

Guess you like