Javascript中的事件,能夠和html交互。javascript
事件流
IE&Opera:事件冒泡
其餘瀏覽器: 事件捕獲html
事件冒泡:事件由最具體的元素(文檔中嵌套層次最深的那個節點)接收,而後逐級向上傳播至最不具體的那個節點(文檔)。java
事件捕獲:不太具體的節點應該更早接收到事件,而最具體的節點應該最後接收到事件。node
缺點:瀏覽器
把一個函數賦值給一個事件處理程序的屬性。
能夠添加多個事件處理程序。dom
DOM2級事件定義了2個方法:
用於處理指定和刪除事件處理程序的操做:addEventListener() 和 removeEventListener()
都接收三個參數:要處理的事件名、做爲事件處理程序的函數和布爾值(true:表示在事件捕獲階段調用事件處理程序 false:表示事件在事件冒泡階段調用事件處理程序)。函數
var btn3 = document.getElementById('btn3'); btn3.addEventListener('click', showMessage, false); // 添加事件 btn3.removeEventListener('click', showMessage, false); // 刪除事件
attachEvent() 添加事件處理程序
detachEvent() 刪除事件處理程序
都接收兩個參數:事件處理程序名稱和事件處理程序函數
不加第三個參數是由於IE8以前的瀏覽器只支持事件冒泡。ui
btn3.attachEvent('onclick', showMessage); // 添加事件處理程序 btn3.detachEvent('onclick', showMessage); // 刪除事件處理程序
使用瀏覽器能力檢測(Browser Compatibility)方法spa
封裝方法:跨瀏覽器事件處理程序方法封裝code
var eventUtil = { // 添加句柄 addHandler: function (element, type, handler) { if(element.addEventListener){ //DOM2級 element.addEventListener(type, handler, false); }else if(element.attachEvent){ // DOM0級 IE element.attachEvent('on' + type, handler); }else{ // HTML事件 element['on' + type] = handler; } }, // 刪除句柄 removeHandler: function (element, type, handler) { if(element.removeEventListener){ //DOM2級 element.removeEventListener(type, handler, false); }else if(element.detachEvent){ // DOM0級 IE element.detachEvent('on' + type, handler); }else{ // HTML事件 element['on' + type] = null; } } }
在觸發DOM上的事件時都會產生一個對象,叫作事件對象。
DOM事件對象event的屬性:
用於獲取事件類型
如:click
等
用於獲取事件目標
如:target.nodeName
用於阻止事件冒泡
用於阻止事件的默認行爲
用於獲取事件類型
用於獲取事件目標
IE中沒有e.target屬性,而是 e.srcElement 屬性。
因此,js中獲取元素最兼容的寫法是:
e = event || window.event; // IE8以前使用window.event 傳遞事件 var element = e.target || e.srcElement;
用於阻止事件冒泡
true:表示阻止事件冒泡 fales:表示不組織事件冒泡
用於阻止事件的默認行爲
false:表示阻止事件的默認行爲
繼續封裝eventUtil
原出處:http://www.cnblogs.com/fanyong/ var eventUtil = { // 添加句柄 addHandler: function (element, type, handler) { if(element.addEventListener){ //DOM2級 element.addEventListener(type, handler, false); }else if(element.attachEvent){ // DOM0級 IE element.attachEvent('on' + type, handler); }else{ // HTML事件 element['on' + type] = handler; } }, // 刪除句柄 removeHandler: function (element, type, handler) { if(element.removeEventListener){ //DOM2級 element.removeEventListener(type, handler, false); }else if(element.detachEvent){ // DOM0級 IE element.detachEvent('on' + type, handler); }else{ // HTML事件 element['on' + type] = null; } }, // 獲取事件對象 getEvent: function (event) { return event ? event : window.event; }, // 獲取事件類型 getType: function (event) { return event.type; }, // 獲取事件目標對象 getElement: function (event) { return event.target || event.srcElement; } // 阻止事件的默認行爲 preventDefault: function (event) { if (event.preventDefault) { event.preventDefaul(); }else{ event.returnValue = false; } }, // 阻止冒泡 stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); }else{ event.cancelBubble = true; } } }