鼠標事件
鼠標事件有不少：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. }