javascript - 简单的 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

您的问题在于附加事件处理程序。您应该绑定(bind)到 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 = 您可能会在将来的绑定(bind)事件中获得更好的效果。

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

jsfiddle demonstration