简单的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的样式来覆盖背景图片。这样你保持风格信息和行为分开。