>[danger]**1. 常用事件** | 頁面事件 | | | --- | --- | | ` onload ` | 當頁面載入完畢后觸發 | | 焦點事件 | | | --- | --- | | `onfocus ` | 當獲取焦點時觸發 | | ` onblur` | 當失去焦點時觸發 | | 鼠標事件 | | | --- | --- | | `onmouseover`| 當鼠標懸浮時觸發 | | `onmouseout ` | 當鼠標離開時觸發 | | `onmousemove` | 當鼠標移動時觸發 | | 鍵盤事件 | | | --- | --- | | `onkeypress`| 當鍵盤按下時觸發 | | ` onkeydown` | 當鍵盤按下時觸發 | | `onkeyup` | 當鍵盤彈起時觸發 | | 其他事件 | | | --- | --- | | ` onclick`| 當鼠標單擊時觸發 | | ` ondblclick` | 當鼠標雙擊時觸發 | | `onmouseup` | 當鼠標釋放時觸發 | | ` onresize` | 當窗口改變大小時觸發 | | ` onscroll ` | 當滾動條滾動時觸發 | | `onsubmit` | 當表單提交時觸發 | | `onchange` | select>option切換 | >[danger]**2. 事件綁定** 1) 行內綁定 ~~~ <input type="text" onblur = "this.value='OK'";> //this表示當前的標簽的dom對象 ~~~ 2) 行內-動態綁定 ~~~ <input type="text" onblur = "t()";> <script> function t(){ console.log('HI'); } </script> ~~~ 3) 動態綁定 ~~~ var a = document.getElementsByTagName('a'); a.onblur = function(){ alert('HI'); alert(this.value); //this指當前節點對象本身 } ~~~ >[danger]**3. 事件監聽** >[info]事件監聽3個事件階段，依次是捕獲階段、目標階段、冒泡階段。 事件監聽：同一個節點對象，可以同時綁定多個觸發事件； 綁定和移除事件監聽 ~~~ var a = document.getElementsByTagName('a'); //事件1 function t1(){ alert('HI'); } //事件2 function t2(){ alert('NO'); } //事件監聽函數 function addEvent(target,type,func){ if(target.addEventListener){ target.addEventListener(type,func); }else{ target.attachEvent("on"+type,func); } } //綁定多個事件 addEvent(a,'cilck',t1); addEvent(a,'cilck',t2); //移除事件監聽函數```` function removeEvent(target,type,func){ if(target.removeEventListener){ target.removeEventListener(type,func); }else{ target.detachEvent("on"+type,func); } } //移除事件監聽 removeEvent(a,'click',t1); removeEvent(a,'click',t2); ~~~ >[danger]**4. 事件對象** >[info] 在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含著所有與事件有關的信息。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。 獲取事件對象兼容性寫法： ~~~ var a = document.getElementsByTagName('a'); a.oncilck = function(event){ var evt = window.event || event; console.log(evt); } ~~~ >[danger]**5. 阻止冒泡** >[info]觸發一個元素的事件的時候，同時會觸發該元素的父元素的事件。這就是事件冒泡。 //阻止事件冒泡函數兼容性寫法 ~~~ function stopMaoPao(e) { var e = window.event ||event ; if (e.stopPropagation) e.stopPropagation() else e.cancelBubble = true; } ~~~ 使用： ~~~ document.getElementsByClassName('a').onclick = function(evt){ alert('OK'); stopMaoPao(evt); //阻止這個元素的父元素的事件 } ~~~ >[danger]**6. 阻止默認行為** // 阻止默認瀏覽器動作兼容性寫法 ~~~ function stopDefault(e) { var e = window.event ||event ; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return false; } ~~~ 使用： ~~~ document.forms[0].onsubmit = function(evt){ alert('OK'); stopDefault(evt); } ~~~ 或者 //阻止超鏈接點擊時的跳轉行為 ~~~ var a = document.getElementsByTagName('a'); a.onclick=function(){ return false; } ~~~