#原生JS實現自定義事件 ``` <script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oSpan = document.getElementById('span1'); bindEvent(oDiv, 'click', function () { alert(1); }); bindEvent(oDiv, 'click', function () { alert(2); }); bindEvent(oSpan, 'show', function () { alert(3); }); bindEvent(oSpan, 'show', function () { alert(4); }); bindEvent(oSpan, 'hide', function () { alert(5); }); fireEvent(oDiv, 'click'); // 彈出1和2 fireEvent(oSpan, 'show'); // 彈出3和4 fireEvent(oSpan, 'hide'); // 彈出5 }; function bindEvent(obj, events, fn){ //obj：樓層 //events：書架 //fn：一本書 obj.listeners = obj.listeners || {}; obj.listeners[events] = obj.listeners[events] || []; obj.listeners[events].push(fn); if(obj.addEventListener){ obj.addEventListener(events, fn, false); }else{ obj.attachEvent('on'+events, fn); } } function fireEvent(obj, events){ // 主動觸發自定義事件 for(var i=0; i<obj.listeners[events].length; i++){ obj.listeners[events][i](); } } </script> <div id="div1">div</div> <span id="span1">span</span> ```