鼠標事件深入
- 點擊事件 = mousedown + mouseup
position: absolute會將內聯元素變為塊級（比如a）- a標簽的協議限定符（偽協議，防止跳轉和刷新，讓href不生效），
javascript:;，可以讓點擊和拖拽分離 - 模塊的聲明：xx變量 = function () { } / IIFE
- 等待型模塊和立即執行的模塊
- 用按下、抬起的時間差值來判斷是拖拽還是點擊
邊界問題
- 瀏覽器可能有計算誤差，可以適當將范圍縮小1像素，防止出現滾動條
鼠標點擊
- 鼠標右鍵、中鍵沒有onclick事件，有onmouseup事件
- e.button 左中右分別對應012
- IE10以上使用，否則就不要去添加這些事件了
- 鼠標右鍵事件contextmenu
- 模擬雙擊事件，兩次點擊的時間間隔 < 200ms
多人協作插件開發
- bind也可以，最簡單
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>計算器</title>
</head><body><input type="text" id="input1"><input type="text" id="input2"><div class="btn-group"><button data-method="plus">+</button><button data-method="minus">-</button><button data-method="multi">*</button><button data-method="div">/</button></div><script src="../compat.js"></script><script src="js/index.js"></script><script>var oInput1 = document.getElementById('input1'),oInput2 = document.getElementById('input2'),btnGroup = document.getElementsByClassName('btn-group')[0];var calculator = new Calculator({oInput1,oInput2,btnGroup}).init()</script></body></html>
; (function () {var Calculator = function (opt) {this.oInput1 = opt.oInput1this.oInput2 = opt.oInput2this.btnGroup = opt.btnGroup}Calculator.prototype = {init: function () {this.bindEvent()},bindEvent: function () {var btns = this.btnGroupaddEvent(btns, 'click', this.compute.bind(this))},compute: function (e) {// this指向實例var num1 = parseInt(this.oInput1.value),num2 = parseInt(this.oInput2.value),e = e || window.event,tar = e.target || e.srcElementtagName = tar.tagName.toLowerCase();if (tagName === 'button') {var method = tar.getAttribute('data-method')switch (method) {case 'plus':console.log(num1 + num2)break;case 'minus':console.log(num1 - num2)break;case 'multi':console.log(num1 * num2)break;case 'div':console.log(num1 / num2)break;}}}}window.Calculator = Calculator})()
實現跨組件通信)