轉 js事件探祕

Javascript中的事件,能夠和html交互。javascript

事件流
IE&Opera:事件冒泡
其餘瀏覽器: 事件捕獲html

事件冒泡:事件由最具體的元素(文檔中嵌套層次最深的那個節點)接收,而後逐級向上傳播至最不具體的那個節點(文檔)。java

事件捕獲:不太具體的節點應該更早接收到事件,而最具體的節點應該最後接收到事件。node

事件處理程序

1. HTML事件

缺點:瀏覽器

  • HTML和js代碼緊密的耦合在一塊兒,
  • 不利於擴展,
  • 只能添加一個事件

2. DOM0 級事件處理程序

把一個函數賦值給一個事件處理程序的屬性。
能夠添加多個事件處理程序。dom

3. DOM2 級事件處理程序

DOM2級事件定義了2個方法:
用於處理指定和刪除事件處理程序的操做:addEventListener() 和 removeEventListener()
都接收三個參數:要處理的事件名、做爲事件處理程序的函數和布爾值(true:表示在事件捕獲階段調用事件處理程序 false:表示事件在事件冒泡階段調用事件處理程序)。函數

var btn3 = document.getElementById('btn3'); btn3.addEventListener('click', showMessage, false); // 添加事件 btn3.removeEventListener('click', showMessage, false); // 刪除事件

4. IE事件處理程序

attachEvent() 添加事件處理程序
detachEvent() 刪除事件處理程序
都接收兩個參數:事件處理程序名稱和事件處理程序函數
不加第三個參數是由於IE8以前的瀏覽器只支持事件冒泡。ui

btn3.attachEvent('onclick', showMessage); // 添加事件處理程序 btn3.detachEvent('onclick', showMessage); // 刪除事件處理程序

5. 跨瀏覽器事件處理程序

使用瀏覽器能力檢測(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上的事件時都會產生一個對象,叫作事件對象。

DOM事件對象event的屬性:

1. type屬性

用於獲取事件類型
如:click

2.target屬性

用於獲取事件目標
如:target.nodeName

3.stopPropagation()

用於阻止事件冒泡

4. preventDefault()

用於阻止事件的默認行爲

IE中的事件對象

1. type 屬性

用於獲取事件類型

2. srcElement 屬性

用於獲取事件目標
IE中沒有e.target屬性,而是 e.srcElement 屬性。

因此,js中獲取元素最兼容的寫法是:

e = event || window.event; // IE8以前使用window.event 傳遞事件 var element = e.target || e.srcElement;

3. cancelBubble 屬性

用於阻止事件冒泡

true:表示阻止事件冒泡 fales:表示不組織事件冒泡

4. returnValue 屬性

用於阻止事件的默認行爲

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; } } }
相關文章
相關標籤/搜索