DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基礎(chǔ), 任何文檔或者瀏覽器窗口發(fā)生的交互, 都要通過綁定事件進(jìn)行交互;
事件有DOM0, DOM2和DOM3的區(qū)分(別問我怎么少了一個DOM1, 也沒找到DOM1的信息啊,);
DOM0就是直接通過 onclick寫在html里面的事件, 比如:
運(yùn)行下面代碼
<input onclick="alert(1)" />?
DOM2是通過addEventListener綁定的事件, 還有IE下的DOM2事件通過attachEvent綁定;
DOM3是一些新的事件, 區(qū)別DOM3和DOM2的方法我感覺是DOM3事件有分大小寫的,DOM2沒有;
事件流(現(xiàn)在很流行偷圖么么噠)
IE的事件流是冒泡, 從里面往上面冒, netscape是從外部元素往內(nèi)部元素捕獲;
而DOM2級的事件規(guī)定了事件流包含三個階段包括：?1：事件捕獲， 2：處于目標(biāo)階段， 3：事件冒泡階段（IE8以及更早版本不支持DOM事件流）;
DOM0事件
運(yùn)行下面代碼
<input onclick="alert(event)" /> <form> <input name="hehe" value="hehe" /> <input onclick="alert(hehe.value)">所有DOM0的事件作用域被擴(kuò)展了哇;
</form>
?
DOM0的事件具有極好的跨瀏覽器優(yōu)勢, 會以最快的速度綁定, 如果你通過DOM2綁定要等到JS運(yùn)行, DOM0不用, 因為DOM0是寫在元素上面的哇;
DOM2事件
DOM2事件的冒泡和捕獲
運(yùn)行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><style type="text/css">#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }#c { width: 100px; height: 100px; border: 1px solid red; }</style></head><body><div id="p">parent<div id="c">child</div></div><script type="text/javascript">var p = document.getElementById('p'),c = document.getElementById('c');c.addEventListener('click', function () {alert('子節(jié)點捕獲')}, true);c.addEventListener('click', function (e) {alert('子節(jié)點冒泡')}, false);p.addEventListener('click', function () {alert('父節(jié)點捕獲')}, true);p.addEventListener('click', function () {alert('父節(jié)點冒泡')}, false);</script></body></html>
這個依次會打出父節(jié)點捕獲,子節(jié)點捕獲,子節(jié)點冒泡和父節(jié)點冒泡,(注意：如果你在目標(biāo)元素上改變綁定事件的順序, 這些事件可能就不按照捕獲和冒泡的順序來了，而是根據(jù)捕獲和冒泡的順序進(jìn)行觸發(fā) , 這個有解決方法,參考:) ==>>(葉小釵的東東)http://www.cnblogs.com/yexiaochai/p/3567597.html );
捕獲的事件是按照順序執(zhí)行的, 而冒泡的事件在有的瀏覽器中的按照順序執(zhí)行有的按照相反的順序執(zhí)行;
說實話啊，事件捕獲沒啥用處么么噠;
還有一點要注意的是：元素點擊里面的this有問題哦, 在IE8和和IE8以前, 通過attachEvent綁定的事件里面的this是window;
運(yùn)行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><style type="text/css">#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }</style></head><body><div id="p">p</div><script type="text/javascript">var p = document.getElementById('p');p.attachEvent("onclick",function(){alert(this);})//在IE5678這個彈出的是window哦,這個要主要, 要讓this 指向這個元素通過apply或者call改變上下文</script></body></html>?
chrome下有個getEventListeners可以獲取元素綁定事件，?從小釵哪里抄的,代碼如下：
運(yùn)行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title> </head> <body> <div id="d">ddssdsd</div><script type="text/javascript">var node = document.getElementsByTagName('*');var d = document.getElementById('d');d.addEventListener('click', function () {alert();}, false);d.addEventListener('click', function () {alert('我是第二次');}, false);d.onclick = function () {alert('不規(guī)范的綁定');}d.addEventListener('click', function () {alert();}, true);d.addEventListener('mousedown', function () {console.log('mousedown');}, true);var evets = typeof getEventListeners == 'function' && getEventListeners(d);getEventListeners(d)</script> </body> </html>?
這個兼容問題常見的解決方法，一般來說夠用了：
運(yùn)行下面代碼
<script>var eventUtil = {add : function(el, type, handler) {if(el.addEventListener) {el.addEventListener(type, handler, false);}else if( el.attachEvent ) {el.attachEvent("on"+type, handler);}else{el["on"+type] = handler;}},off : function(el, type, handler) {if( el.removeEventListener ) {el.removeEventListener(type, handler, false)}else if( el.detachEvent ) {el.detachEvent(type, handler);}else{el["on"+type] = null;}}};</script>?
事件對象
無論在DOM0還是DOM2還是DOM3中都會在事件函數(shù)中傳入事件對象;
運(yùn)行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><style type="text/css">#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }</style></head><body><div id="p">p</div><script type="text/javascript">var p = document.getElementById('p');p.addEventListener("click",function(){console.log(arguments[0]);})</script></body></html>?
事件對象event下的屬性和方法：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 因為各個瀏覽器的事件對象不一樣, 把主要的時間對象的屬性和方法列出來; bubble ：??? 表明事件是否冒泡 cancelable ：? 表明是否可以取消冒泡 currentTarget ： 當(dāng)前時間程序正在處理的元素, 和this一樣的; defaultPrevented：?false?，如果調(diào)用了preventDefualt這個就為真了; detail： 與事件有關(guān)的信息(滾動事件等等) eventPhase： 如果值為1表示處于捕獲階段， 值為2表示處于目標(biāo)階段，值為三表示在冒泡階段 target || srcElement： 事件的目標(biāo) trusted： 為ture是瀏覽器生成的，為false是開發(fā)人員創(chuàng)建的（DOM3） type ： 事件的類型 view ： 與元素關(guān)聯(lián)的window， 我們可能跨iframe； preventDefault()??? 取消默認(rèn)事件； stopPropagation() 取消冒泡或者捕獲； stopImmediatePropagation() (DOM3)阻止任何事件的運(yùn)行； //stopImmediatePropagation阻止 綁定在事件觸發(fā)元素的 其他同類事件的callback的運(yùn)行 IE下的事件對象是在window下的，而標(biāo)準(zhǔn)應(yīng)該作為一個參數(shù), 傳為函數(shù)第一個參數(shù); IE的事件對象定義的屬性跟標(biāo)準(zhǔn)的不同，如： cancelBubble 默認(rèn)為false, 如果為true就是取消事件冒泡; returnValue 默認(rèn)是true，如果為false就取消默認(rèn)事件; srcElement, 這個指的是target, Firefox下的也是srcElement; |
總結(jié)
以上是生活随笔為你收集整理的DOM0,DOM2,DOM3事件,事件基础知识入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： addEventListener 的用法
- 下一篇： JS错误类型的学习