簡單的JavaScript無法正常工作

Question

有人可以告訴我我做錯了什麼嗎？

window.onload = initForm; 
function initForm() { 
    var allTags = document.getElementsByTagName("*"); 
    for(i=0; i<allTags.length; i++) { 
     if (allTags[i].className.indexOf("textbox") > -1) { 
      allTags[i].onFocus = fieldSelect; 
      allTags[i].onBlur = fieldDeSelect;   
     } 
    } 
} 
function fieldSelect() { 
    this.style.backgroundImage = "url('inputBackSelected.png')"; 
} 

function fieldDeSelect() { 
    this.style.backgroundImage = "url('inputBack.png')"; 
} 

我是JavaScript的初學者，所以我不習慣調試代碼。

感謝

盧克

Answer 1

相反的window.onload的=嘗試在initForm =的window.onload函數（）{/ 初始化函數/} 也指的一種功能，當你應該使用（）即使沒有參數。

Answer 2

問題是，當fieldSelect和fieldDeselect被調用時，this引用的是window對象，而不是引發該事件的元素。你可能要考慮使用jQuery：

$(document).ready(function() { 
    $('.textbox').focus(fieldSelect).blur(fieldDeselect); 
}); 

function fieldSelect() { 
    $(this).css('background-image', 'url("inputBackSelected.png")'); 
} 

function fieldDeselect() { 
    $(this).css('background-image', 'url("inputBack.png")'); 
} 

的jQuery需要確保當你的事件處理程序獲取調用，this是指觸發事件的元素的照顧。

Answer 3

你的問題在於附加你的事件處理程序。您應該綁定到onfocus和onblur（注意小寫事件名稱）。

作爲一個建議，你可能想看看一個非常簡單的跨瀏覽器addEvent()用的代碼快速線加入，以確保正確this指針：

function addEvent(obj, evType, fn, useCapture){ 
    if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, useCapture); 
    return true; 
    } else if (obj.attachEvent){ 
    // fix added by me to handle the `this` issue 
    var r = obj.attachEvent("on"+evType, function(){ 
     retrun fn.apply(obj, arguments); 
    }); 
    return r; 
    } else { 
    alert("Handler could not be attached"); 
    } 
} 

然後使用addEvent函數，而不是allTags[i].onfocus =你在未來的約束事件中可能會有更好的里程。

addEvent(allTags[i], 'focus', fieldSelect); 
addEvent(allTags[i], 'blur', fieldDeSelect); 

jsfiddle demonstration

Answer 4

兩件事情，這些事件應該是所有小寫（onfocus，onblur）和this沒有指向觸發在IE事件的對象。試試這個：

function fieldSelect(e) { 
    var event; 
    if(!e) { 
     event = window.event; 
    } else { 
     event = e; 
    } 
    event.target.style.backgroundImage = "url('inputBackSelected.png')"; 
} 

function fieldDeSelect(e) { 
    var event; 
    if(!e) { 
     event = window.event; 
    } else { 
     event = e; 
    } 
    event.target.style.backgroundImage = "url('inputBack.png')"; 
} 

標準complient瀏覽器將事件對象傳遞給事件處理程序。 IE使用全局的window.event對象。無論哪種方式，您都可以使用該對象來獲取觸發處理程序的事件的目標。

另一個可能更可取的選擇是將您的功能設置並刪除className而不是直接更改樣式。然後在樣式表中放置一個叫做maybe selected的樣式來覆蓋背景圖片。這樣你保持風格信息和行爲分開。