js活用事件觸發(fā)對象動作
更新時間:2008年08月10日 20:12:29 作者:
現(xiàn)在基本上我很少在對象里面寫事情觸發(fā)行為了,因為感覺那樣做相同的對象代碼利用率太低,容易導(dǎo)致代碼冗余.
從學(xué)習(xí)W3C標(biāo)準(zhǔn)以來,對于代碼我好像養(yǎng)成了一種怪癖,能統(tǒng)一復(fù)用的,就不會多寫一點東西,這樣前臺頁面代碼看起來會清爽很多,而效率也會成直線上升.
<script type="text/javascript">
<!--
//定義鼠標(biāo)觸發(fā)事件的范圍
function findOutDiv(thisEvent){
//利用循環(huán)查找符合CSS樣式名字的對象
while(thisEvent.className != "piccell"){
//如果這個對象的標(biāo)簽名字是HTML就停止,然后讓事件對象不存在,用做后面的判斷
if(thisEvent.tagName == "HTML"){
thisEvent = false;
break;
}else{
//否則繼續(xù)下個對象,即他的父對象
thisEvent = thisEvent.parentNode
}
}
//返回事件對象,如果事件對象不存在返回假
return thisEvent;
}
//利用鼠標(biāo)在對象移動屬性作為時間觸發(fā)行為
document.onmouseover = function(e){
//這個e是FireFox捕捉事件觸發(fā)對象的方法
if(!e)e = window.event;
//定義Event給于鼠標(biāo)觸發(fā)對象的實體,即符合標(biāo)準(zhǔn)并可以控制的對象
//target為FF專用,srcElement為IE專用
var Event = e.target?e.target:e.srcElement
//定義可控制的對象,調(diào)用鼠標(biāo)觸發(fā)事件范圍所返回的對象
var thisEvent = findOutDiv(Event)
//如果對象存在就繼續(xù)
if(thisEvent){
//給對象定義CSS樣式
thisEvent.style.border = "2px solid #7A99D2";
thisEvent.style.background = "#D2E4FC";
}
}
//同上,利用鼠標(biāo)在對象移出作為時間觸發(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>
這樣寫的好處顯而易見,可以不用在每個對象中寫觸發(fā)動作的行為,極大的節(jié)省了代碼,并且JS更有可讀性.
過段時間等我把個性化頁面整理完成后發(fā)布出來,讓大家看看利用事件觸發(fā)對象動作的好處.
GOOGLE,和微軟的LIVE他的個性化頁面寫的很不錯,所以大家都可以學(xué)習(xí)一下他們的代碼,這樣對你將來的AJAX應(yīng)用會有非常大的幫助.
復(fù)制代碼 代碼如下:
<script type="text/javascript">
<!--
//定義鼠標(biāo)觸發(fā)事件的范圍
function findOutDiv(thisEvent){
//利用循環(huán)查找符合CSS樣式名字的對象
while(thisEvent.className != "piccell"){
//如果這個對象的標(biāo)簽名字是HTML就停止,然后讓事件對象不存在,用做后面的判斷
if(thisEvent.tagName == "HTML"){
thisEvent = false;
break;
}else{
//否則繼續(xù)下個對象,即他的父對象
thisEvent = thisEvent.parentNode
}
}
//返回事件對象,如果事件對象不存在返回假
return thisEvent;
}
//利用鼠標(biāo)在對象移動屬性作為時間觸發(fā)行為
document.onmouseover = function(e){
//這個e是FireFox捕捉事件觸發(fā)對象的方法
if(!e)e = window.event;
//定義Event給于鼠標(biāo)觸發(fā)對象的實體,即符合標(biāo)準(zhǔn)并可以控制的對象
//target為FF專用,srcElement為IE專用
var Event = e.target?e.target:e.srcElement
//定義可控制的對象,調(diào)用鼠標(biāo)觸發(fā)事件范圍所返回的對象
var thisEvent = findOutDiv(Event)
//如果對象存在就繼續(xù)
if(thisEvent){
//給對象定義CSS樣式
thisEvent.style.border = "2px solid #7A99D2";
thisEvent.style.background = "#D2E4FC";
}
}
//同上,利用鼠標(biāo)在對象移出作為時間觸發(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>
這樣寫的好處顯而易見,可以不用在每個對象中寫觸發(fā)動作的行為,極大的節(jié)省了代碼,并且JS更有可讀性.
過段時間等我把個性化頁面整理完成后發(fā)布出來,讓大家看看利用事件觸發(fā)對象動作的好處.
GOOGLE,和微軟的LIVE他的個性化頁面寫的很不錯,所以大家都可以學(xué)習(xí)一下他們的代碼,這樣對你將來的AJAX應(yīng)用會有非常大的幫助.
您可能感興趣的文章:
相關(guān)文章
動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
根據(jù)新界面的要求,需要一部分圖片來增強日期控件的美觀性??紤]到既要實現(xiàn)加載圖表的目標(biāo),又要保持控件的獨立性以便將來的移植。2010-09-09使用TextRange獲取輸入框中光標(biāo)的位置的代碼
使用TextRange獲取輸入框中光標(biāo)的位置的代碼...2007-03-03el-input 標(biāo)簽中密碼的顯示和隱藏功能的實例代碼
本文通過實例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07JS和css實現(xiàn)檢測移動設(shè)備方向的變化并判斷橫豎屏幕
這篇文章主要介紹了JS和css實現(xiàn)檢測移動設(shè)備方向的變化并判斷橫豎屏幕,本文分別給出實現(xiàn)代碼,需要的朋友可以參考下2015-05-05使用requirejs模塊化開發(fā)多頁面一個入口js的使用方式
這篇文章主要介紹了使用requirejs模塊化開發(fā)多頁面一個入口js的使用方式,需要的朋友可以參考下2017-06-06