1.事件冒泡與事件捕獲

2.事件與事件句柄 ? 3.事件委托：利用事件的冒泡技術(shù)。子元素的事件最終會冒泡到父元素直到跟節(jié)點。事件監(jiān)聽會分析從子元素冒泡上來的事件。 事件委托的好處： ? ? 1.每個函數(shù)都是對象，都會占用內(nèi)存，內(nèi)存中對象越多，性能越差。 ? ? 2.必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。 怎樣處理由于事件較多引起的性能差： 1.采用事件委托技術(shù)，限制簡歷的連接數(shù)量 2.在不需要的時候移除事件處理程序 例子： html: <div id="myDiv"><input type="button" value="點我" id="myBtn"> </div> ? js: var btn=document.getElementById("myBtn"); btn.onclick=function(){document.getElementById("myDiv").innerHTML="Progress..."; }

?

注意：通過設(shè)置innerHTML可以把按鈕移走，但是事件處理程序依舊與按鈕保持著事件處理程序的引用都保存在內(nèi)存中。 ? ? 所以最好手動移除： ? var btn=document.getElementById("myBtn"); btn.onclick=function(){btn.onclick=null;//移除事件處理程序document.getElementById("myDiv").innerHTML="Progress..."; } ? ?? ? 4.事件對象與事件源 function eventHandler(e){//獲取事件對象 e = e || window.event;//IE和Chrome下是window.event FF下是e //獲取事件源 var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target }

?

5.取消事件默認(rèn)行為 function eventHandler(e) {e = e || window.event;// 防止默認(rèn)行為 if (e.preventDefault) {e.preventDefault();//IE以外 } else {e.returnValue = false;//IE //注意：這個地方是無法用return false代替的 //return false只能取消元素 } }

?

6.阻止事件冒泡 function myParagraphEventHandler(e) {e = e || window.event;if (e.stopPropagation) {e.stopPropagation();//IE以外 } else {e.cancelBubble = true;//IE } }

?

7.event與target event：代表了包含了事件的所有狀態(tài)。 target:觸發(fā)事件的元素。 currentTarget:事件綁定的元素。 注意著兩者的區(qū)別。

html:

<ul id="ulT"> <li class="item1">fsda</li> <li class="item2">ewre</li> <li class="item3">qewe</li> <li class="item4">xvc</li> <li class="item5">134</li> </ul>
js: document.getElementById("ulT").onclick = function (event) {console.log(event.target);console.log(event.currentTarget); }

?轉(zhuǎn)載：http://www.cnblogs.com/zqzjs/p/4878785.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。