Javascript中活用事件觸發對象動作

現在基本上我很少在對象裡面寫事情觸發行為了,因為感覺那樣做相同的對象代碼利用率太低,容易導致代碼冗餘.

從學習W3C標準以來,對於代碼我好像養成了一種怪癖,能統一複用的,就不會多寫一點東西,這樣前台頁面代碼看起來會清爽很多,而效率也會成直線上升.

下面來講一下最近一個項目裡面比較有代表性的東西.

(執行個體可以查看這裡http://www.pplive.com/zh-cn/view.html)

程式碼

<script type="text/javascript">
<!--
//定義滑鼠觸發事件的範圍
function findOutDiv(thisEvent){
//利用迴圈尋找符合CSS樣式名字的對象
　　while(thisEvent.className != "piccell"){
//如果這個對象的標籤名字是HTML就停止,然後讓事件對象不存在,用做後面的判斷
　　　　if(thisEvent.tagName == "HTML"){
　　　　　　thisEvent = false;
　　　　　　break;
　　　　}else{
//否則繼續下個對象,即他的父物件
　　　　　　thisEvent = thisEvent.parentNode
　　　　}
　　}
//返回事件對象,如果事件對象不存在返回假
　　return thisEvent;
}
//利用滑鼠在對象移動屬性作為時間觸發行為
document.onmouseover = function(e){
//這個e是FireFox捕捉事件觸發對象的方法
　　if(!e)e = window.event;
//定義Event給於滑鼠觸發對象的實體,即符合標準並可以控制的對象
//target為FF專用,srcElement為IE專用
　　var Event = e.target?e.target:e.srcElement
//定義可控制的對象,調用滑鼠觸發事件範圍所返回的對象
　　var thisEvent = findOutDiv(Event)
//如果對象存在就繼續
　　if(thisEvent){
//給對象定義CSS樣式
　　　　thisEvent.style.border = "2px solid #7A99D2";
　　　　thisEvent.style.background = "#D2E4FC";
　　}
}
//同上,利用滑鼠在對象移出作為時間觸發行為
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>

這樣寫的好處顯而易見,可以不用在每個對象中寫觸發動作的行為,極大的節省了代碼,並且JS更有可讀性.