Java入门第六篇：Java script(js)的事件

【js中的事件分类】

 
 1.鼠标事件  

  　　onclick、ondbclick、onmouseover、onmouseout 等 

 
 2.HTML事件: 

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

 
  3.键盘事件: 

  　　1.keydown :键盘按下; 

  　　2.keypress :键盘按下后抬起的瞬间; 

  　　3.keyup :键盘抬起; 

 
 　　[注意事项] 

  　　　　1.执行顺序 keydown-keypress-keyup 

  　　　　2.keypress只能捕获字母、数字、符号键，而不能捕获功能键。 

  　　　　3.长按时循环执行keydown-keypress； 

  　　　　4.有keydown，不一定有keyup，当长按时焦点失去，不再触发keyup。 

  　　　　5.keypress 区分字母大小写，keydown，keyup不区分。 

  4..事件因子，当触发一个事件时，该事件将向事件所调用的函数中，默认传入一个餐宿，这个参数就是时间因子，包含了该事件的各种详细信息。 

 
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);
}(兼容写法)

  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之前
　　}
}

Java入门第六篇：Java script(js)的事件

猜你喜欢