JavaScript事件代理

事件代理 (event delegation)

JavaScript事件代理是一種簡單地技巧,通過它我們可以把事件處理器添加到一個父級元素上,這樣就避免了把事件處理器添加到多個子集元素上

事件代理利用了兩個在JavaScript事件中常會被忽略的兩個特性:事件冒泡以及目標元素
舉個例子:
現在頁面中有一個列表結構

<ul id="ul1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

現在需要給每個li添加點擊事件,用一般的方法可能會遍歷每個li給每個li單獨添加點擊事件,但是這樣做的話會影響網站的性能而且可能會造成內存泄露,當創建了新的li時,已經遍歷完了li,給已存li添加上事件了。所以,我們採用事件代理,也叫做事件委託來解決這個問題
我們可以給ul添加點擊事件

		var ul = document.getElementById("ul1");
		ul.onmouseover = function(evnt){
			//考慮到兼容性
			var evnt = evnt || window.event;
			var target = evnt.target || evnt.srcElement;
			if(target.tagName.toLowerCase() =="li"){
			//li添加的事件
				alert("事件委託方法成功!");
			}
	}
	


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章