資訊專欄INFORMATION COLUMN
事件委托
事件委托
利用冒泡原理，把事件加到父級元素上，觸發(fā)事件的執(zhí)行效果
優(yōu)點：
節(jié)省內(nèi)存開銷
對于追加的節(jié)點同樣有效
舉了例子，創(chuàng)建一堆無序列表，我們希望當(dāng)鼠標(biāo)滑過的時，改變當(dāng)前
var ulBox = document.getElementById("ulBox");
var li = document.getElementsByTagName("li");
var l = li.length;
for(i=0;i
這樣，我們已經(jīng)為每個
都添加了事件，但是，這個事件循環(huán)了 i 次，比較消耗性能。
用事件代理也可以實現(xiàn)同樣的效果
var ulBox = document.getElementById("ulBox");
ulBox.onmouseover = function(e){
var hover = e||window.event;//獲取事件對象，
var nodeLi = hover.target||hover.srcElement;//獲取事件對象的具體子元素
nodeLi.style.background="red";
}
ulBox.onmouseout = function(e){
var hover = e||window.event;//獲取事件對象，
var nodeLi = hover.target||hover.srcElement;//獲取事件對象的具體子元素
nodeLi.style.background="red";
}
如果我們要追加幾個
，使用一個
如果使用常規(guī)方法
var ulBox = document.getElementById("ulBox");
var li = document.getElementsByTagName("li");
var btn = document.getElementById("btn");
var l = li.length;
for(i=0;i
新加入的
并不能響應(yīng)滑過變色的事件，因為在添加完元素之前，循環(huán)已經(jīng)執(zhí)行完畢。
使用事件委托，即可以直接響應(yīng)事件效果
ulBox.onmouseover=function(e){
var hover=e||window.event;
var nodeLi=hover.target||hover.srcElement;
nodeLi.style.background="red";
}
ulBox.onmouseout=function(e){
var hover=e||window.event;
var nodeLi=hover.target||hover.srcElement;
nodeLi.style.background="";
}
btn.onclick=function(){
var oLi = document.createElement("li");
oLi.innerHTML="Low";
ulBox.appendChild(oLi);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91396.html
摘要：實際上，可以將其理解為某種形式的繼承。如果上下文是，則使用全局對象代替。例如的第個參數(shù)是上下文，后續(xù)是實際傳入的參數(shù)序列中允許更換上下文是為了共享狀態(tài)，尤其是在事件回調(diào)中。 公開記錄學(xué)習(xí)JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應(yīng)用開發(fā)》為主要學(xué)習(xí)資料。接上一篇類的學(xué)習(xí)，發(fā)現(xiàn)實在是看暈了，有些例子是能看懂在干嘛，但是不知道為什么這樣做，有的甚至...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
閱讀 1355·2021-10-14 09:50
閱讀 1641·2019-08-30 15:54
閱讀 1124·2019-08-30 11:22
閱讀 3002·2019-08-30 10:50
閱讀 1888·2019-08-29 18:39
閱讀 3144·2019-08-29 13:07
閱讀 2155·2019-08-28 17:54
閱讀 815·2019-08-26 17:44
