鼠标事件
鼠标事件有不少：click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好，你们看名字基本都懂是什么意思。浏览器
其中，contextmenu是右键出现菜单事件，并非右键事件。dom
click是一个完整的点击事件，包括mousedown和mouseup。spa
mouseover和mouseout是一组事件，对应于鼠标的移入移出事件。code
• 全部的鼠标事件都有clientX和clientY，表明的是鼠标点击的位置，咱们能够经过e.clientX和e.clentY来查看。对象
• 左键点击的顺序是：mousedown、mouseup、clickseo
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。ip
• 当咱们同时绑定了click事件和mousedown事件后，如何解决mousedown和click的冲突问题？rem
其实方法很简单，咱们能够经过按下鼠标的事件来判断是执行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. }