南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天，今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。

先说说鼠标事件，鼠标事件可以分为click，over，out，在讲解这部分的内容时，讲师引用了qq面板拖拉效果来讲解鼠标事件。

如图，我们可以通过鼠标拖动qq面板，这个网页中，我们常常见到这类效果，而这类效果主要使用了鼠标事件。

如何实现这类效果呢？先看效果的原理：

具体的内容这里就不详细讲到了，这里主要讲到需要使用的一些知识。在这讲些效果之前，讲师封装了一个getELementsbyclassname函数，这个函数在只能支持IE10以上的浏览器，所以我们必须自己去封装一下，这个函数时获取指定类名的函数。代码实现如下：

function getByClass(clsName,parent){
  var oParent=parent?document.getElementById(parent):document,
      eles=[],
      elements=oParent.getElementsByTagName('*');


  for(var i=0,l=elements.length;i<l;i++){
    if(elements[i].className==clsName){
      eles.push(elements[i]);
    }
  }
  return eles;
}

这个效果实现主要是通过qq面板位置跟随光标变化而变化，所以我们需要知道光标的位置，这就需要用到光标位置clientX clientY，然后设置qq面板相应的位置。知道了这些，大致的效果就可以弄出来了。

接下来看看键盘事件，键盘事件，讲师引用的是抽奖，当我们按一次enter键就会开始抽奖，再按一次就会停止。首先说说如何生成随机数：Math.random()生成随机数，这个产生的是0到1中的随机数。键盘事件主要分为以下几类：

keyDown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
keyUp:当用户释放键盘上的键时触发

所以在抽奖事件我们用到的是keydowm事件。

这里具体类容就不解释了，主要是使用了键盘事件实现了此类效果

今天学习的类容就是这么多，期待明天的学习。