|
|
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
<!--
//定義鼠標(biāo)觸發(fā)事件的范圍
function findOutDiv(thisEvent){
//利用循環(huán)查找符合CSS樣式名字的對(duì)象
while(thisEvent.className != "piccell"){
//如果這個(gè)對(duì)象的標(biāo)簽名字是HTML就停止,然后讓事件對(duì)象不存在,用做后面的判斷
if(thisEvent.tagName == "HTML"){
thisEvent = false;
break;
}else{
//否則繼續(xù)下個(gè)對(duì)象,即他的父對(duì)象
thisEvent = thisEvent.parentNode
}
}
//返回事件對(duì)象,如果事件對(duì)象不存在返回假
return thisEvent;
}
//利用鼠標(biāo)在對(duì)象移動(dòng)屬性作為時(shí)間觸發(fā)行為
document.onmouseover = function(e){
//這個(gè)e是FireFox捕捉事件觸發(fā)對(duì)象的方法
if(!e)e = window.event;
//定義Event給于鼠標(biāo)觸發(fā)對(duì)象的實(shí)體,即符合標(biāo)準(zhǔn)并可以控制的對(duì)象
//target為FF專(zhuān)用,srcElement為IE專(zhuān)用
var Event = e.target?e.target:e.srcElement
//定義可控制的對(duì)象,調(diào)用鼠標(biāo)觸發(fā)事件范圍所返回的對(duì)象
var thisEvent = findOutDiv(Event)
//如果對(duì)象存在就繼續(xù)
if(thisEvent){
//給對(duì)象定義CSS樣式
thisEvent.style.border = "2px solid #7A99D2";
thisEvent.style.background = "#D2E4FC";
}
}
//同上,利用鼠標(biāo)在對(duì)象移出作為時(shí)間觸發(fā)行為
document.onmouseout = function(e){
if(!e)e = window.event;
var Event = e.target?e.target:e.srcElement
var thisEvent = findOutDiv(Event)
if(thisEvent){
thisEvent.style.border = "2px solid #CCC";
thisEvent.style.background = "#FFF";
}
}
// -->
</script>
這樣寫(xiě)的好處顯而易見(jiàn),可以不用在每個(gè)對(duì)象中寫(xiě)觸發(fā)動(dòng)作的行為,極大的節(jié)省了代碼,并且JS更有可讀性.
過(guò)段時(shí)間等我把個(gè)性化頁(yè)面整理完成后發(fā)布出來(lái),讓大家看看利用事件觸發(fā)對(duì)象動(dòng)作的好處.
GOOGLE,和微軟的LIVE他的個(gè)性化頁(yè)面寫(xiě)的很不錯(cuò),所以大家都可以學(xué)習(xí)一下他們的代碼,這樣對(duì)你將來(lái)的AJAX應(yīng)用會(huì)有非常大的幫助.
JavaScript技術(shù)：js活用事件觸發(fā)對(duì)象動(dòng)作，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
