#自定義事件實例 ``` <style> #div1, #div2, #div3, #div4{ width: 100px; height: 100px; position: absolute; } #div1{ background: #c40000; } #div2{ background: green; left: 100px; } #div3{ background: brown; left: 200px; } #div4{ background: blue; left: 300px; } </style> <script> window.onload = function () { var d1 = new Drag(); d1.init({ // 配置參數 id: 'div1' }); var d2 = new Drag(); d2.init({ // 配置參數 id: 'div2' }); bindEvent(d2, 'toDown', function () { document.title = 'hello'; }); // 新增需求，鼠標按下，讓背景變黒 bindEvent(d2, 'toDown', function () { document.body.style.background = 'black'; }); var d3 = new Drag(); d3.init({ // 配置參數 id: 'div3' }); bindEvent(d3, 'toDown', function () { document.title = '妙味'; }); bindEvent(d3, 'toUp', function () { document.title = '課堂'; }); var d4 = new Drag(); d4.init({ // 配置參數 id: 'div4' }); bindEvent(d4, 'toUp', function () { document.title = 'byebye'; }); }; function Drag() { this.obj = null; this.disX = 0; this.disY = 0; this.settings = { // 默認參數 }; } Drag.prototype.init = function (opt) { var _this = this; this.obj = document.getElementById(opt.id); // 用配置參數去覆蓋默認參數 extend(this.settings, opt); this.obj.onmousedown = function (e) { var e = e || window.event; _this.fnDown(e); fireEvent(_this, 'toDown'); document.onmousemove = function (e) { var e = e || window.event; _this.fnMove(e); }; document.onmouseup = function () { _this.fnUp(); fireEvent(_this, 'toUp'); }; return false; }; }; Drag.prototype.fnDown = function (e) { this.disX = e.clientX - this.obj.offsetLeft; this.disY = e.clientY - this.obj.offsetTop; }; Drag.prototype.fnMove = function (e) { this.obj.style.left = e.clientX - this.disX + 'px'; this.obj.style.top = e.clientY - this.disY + 'px'; }; Drag.prototype.fnUp = function () { document.onmousemove = null; document.onmouseup = null; }; function bindEvent(obj, events, fn){ obj.listeners = obj.listeners || {}; obj.listeners[events] = obj.listeners[events] || []; obj.listeners[events].push(fn); if(obj.nodeType){ if(obj.addEventListener){ obj.addEventListener(events, fn, false); }else{ obj.attachEvent('on'+events, fn); } } } function fireEvent(obj, events){ // 主動觸發自定義事件 if(obj.listeners && obj.listeners[events]){ for(var i=0; i<obj.listeners[events].length; i++){ obj.listeners[events][i](); } } } function extend(obj1, obj2) { for (var attr in obj2) { obj1[attr] = obj2[attr]; } } </script> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> ```