鼠标事件与键盘事件

鼠标事件

鼠标事件有很多：click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好，大家看名字基本都懂是什么意思。

其中，contextmenu是右键出现菜单事件，并不是右键事件。

click是一个完整的点击事件，包括mousedown和mouseup。

mouseover和mouseout是一组事件，对应于鼠标的移入移出事件。

• 所有的鼠标事件都有clientX和clientY，代表的是鼠标点击的位置，我们可以通过e.clientX和e.clentY来查看。

• 左键点击的顺序是：mousedown、mouseup、click

1.   
2.  var firstTime,
3.        lastTime,
4.        flag = false;
5.  document.onclick = function (e) {
6.      console.log(‘click’);
7.  }
8.  document.onmousedown = function (e) {
9.      console.log(‘mousedown’);
10.  }
11.  document.onmouseup = function (e) {
12.      console.log(‘mouseup’);
13.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

输出的结果是mousedown、mouseup、click。

• 当我们同时绑定了click事件和mousedown事件后，如何解决mousedown和click的冲突问题？

其实方法很简单，我们可以通过按下鼠标的事件来判断是执行click还是mousedown事件。

1.   
2.  var firstTime,
3.        lastTime,
4.        flag = false;
5.  document.onclick = function (e) {
6.      if (flag) {
7.          console.log(‘click’);
8.      }else {
9.          console.log(‘mousedown’);
10.      }
11.  }
12.  document.onmousedown = function (e) {
13.      firstTime = new Date().getTime();
14.  }
15.  document.onmouseup = function (e) {
16.      lastTime = new Date().getTime();
17.      if (lastTime - firstTime < 200) {
18.          flag = true;
19.      }else {
20.          flag = false;
21.      }
22.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

• 如何判断鼠标点击的是左键还是右键？

click事件永远都是左键，有左键和右键的区别的是mousedown事件。

再mousedown的事件对象中有一个属性叫做button，这个属性的值是0的时候代表我们按下的是左键，1的时候代表按下的中键，2的时候代表按下的是右键。

1.   
2.  document.onmousedown = function (e) {
3.      if (e.button == 0) {
4.          console.log(‘left’);
5.      }else if (e.button == 1) {
6.          console.log(‘mid’);
7.      }else {
8.          console.log(‘right’);
9.      }
10.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这里我们就可以重新回顾一下拖拽事件了：

1.   
2.  var div = document.getElementsByTagName(‘div’)[0]
3.  function drag(elem) {
4.      var disX,
5.          dixY;
6.      addEvent(elem, ‘mousedown’, function (e) {
7.          var event = e || window.event;
8.          disX = event.clientX - parseInt(getStyle(elem, ‘left’));
9.          disY = event.clientY - parseInt(getStyle(elem, ‘top’));
10.   
11.          addEvent(document, ‘mousemove’, mouseMove);
12.          addEvent(document, ‘mouseup’, mouseUp);
13.          stopBubble(e);
14.          cancelHandler(e);
15.      });
16.   
17.      function mouseMove(e) {
18.          var event = e || window.event;
19.          elem.style.left = event.clientX - disX + ‘px’;
20.          elem.style.top = event.clientY - disY + ‘px’;
21.      }
22.      function mouseUp (e) {
23.          removeEvent(document, ‘mousemove’, mouseMove);
24.          removeEvent(document, ‘mouseup’, arguments.callee);
25.      }
26.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这里我们为了不因为鼠标移动过快导致移出div，我们将mouseover事件绑定到了document上。

• 针对鼠标帧频过快的问题，IE中有一个也可以说是另一种事件捕获的方法——domEle.setCapture()。

调用这个方法之后，页面后续的所有操作就会全部都归于这个domEle上，比如div有一个拖拽事件，不过mousemove绑定在div上，只要调用了这个方法，当鼠标拖拽过程中鼠标移出了div，这个时候有效的鼠标移动就变成了document上的mousemove事件了，但是它还是归于了div上，因此div还是可以跟着鼠标移动。

同时还有一个domEle.releaseCapture()方法可以来释放这个捕获行为。

键盘事件

键盘事件主要有三个：keydown、keypress、keyup。

触发顺序分别是keydown、keypress、keyup。

1.   
2.  document.onkeydown = function (e) {
3.      console.log(‘keydown’);
4.  }
5.  document.onkeypress = function (e) {
6.      console.log(‘keypress’);
7.  }
8.  document.onkeyup = function (e) {
9.      console.log(‘keyup’);
10.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

输出的结果是keydown、keypress、keyup。

keydown和keypress可以响应连续操作，我们一直按着键盘就会一直触发事件。

keypress的范围和keydown有所区别：

keydown可以响应任意键盘按键，keypress只能响应字符类按键，也就是有ASCII码的字符的按键，像字母数字回车空格之类的。

事件对象的属性方面：

只有keypress有charCode属性，这个属性代表的我们输入的这个字符的ASCII码，配合SHIFT之类的按键可以直接获取大写字母等。

keyCode和which每个方法都有，表示的是这个键的唯一标示，可以告诉浏览器我们按下的是键盘上的哪一个键，比如空格是32，32就代表空格。不过我们一般都用which，keyCode用的较少。

• String上有一个方法叫做fromCharCode，可以接受一个Unicode值（包含ASCII值），然后返回对应的字符串，我们可以配合这个方法和charCode来直接获取输入的字符。

1.   
2.  document.onkeypress = function (e) {
3.      console.log(String.fromCharCode(e.charCode));
4.  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

窗体操作类（window上的事件）

load事件

这个事件window.onload和在body标签上写onload是一样的效果，作用是等页面中所有的东西都下载完成再执行里面的代码。

scroll事件

这个方法是监听滚轮滚动的事件，我们可以用这个事件来写一个兼容版的fix定位。

1.   
2.  function beFixed(ele){
3.      var initPosX = ele.getPosition().w,
4.          initPosY = ele.getPosition().h;
5.      addEvent(window, ‘scroll’, function(e){
6.          ele.style.top =  initPosY + getScrollOffset().h + ‘px’;
7.          ele.style.left =  initPosX + getScrollOffset().w + ‘px’;
8.      })
9.  }

转载于:https://my.oschina.net/u/3953786/blog/3003202