简单的JavaScript无法正常工作
有人可以告诉我我做错了什么吗?简单的JavaScript无法正常工作
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的初学者,所以我不习惯调试代码。
感谢
卢克
相反的window.onload的=尝试在initForm =的window.onload函数(){/ 初始化函数/} 也指的一种功能,当你应该使用()即使没有参数。
并非如此。 'window.onload = initform'完全合法。你将'window.onload'的值赋给''function initform'',如果你要添加'()',它会立即调用该函数并将'window.onload'赋给'initform'的返回值。 – gnarf 2010-06-21 19:56:54
问题是,当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
是指触发事件的元素的照顾。
你的问题在于附加你的事件处理程序。您应该绑定到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);
两件事情,这些事件应该是所有小写(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
的样式来覆盖背景图片。这样你保持风格信息和行为分开。
'e = e || window.event;'是确保'e'中适当事件对象的快速方法。如果'e'是falsy(undefined/0 /''/ etc),JavaScript或运算符'||'将导致'window.event'被分配给'e'; – gnarf 2010-06-21 21:03:31
感谢您的回应,似乎我已经在onBlur而不是onblur的事实意味着它不起作用。但firefox的firebig,也没有铬的检查员指出了这一点。无论如何,它现在起作用了,而且似乎也可以在IE 8中工作。但不确定其他版本的IE。 – StrattonL 2010-06-21 21:18:15
我的意思是萤火虫! – StrattonL 2010-06-21 21:18:48
什么具体isnt工作,并且你得到一个错误? – 2010-06-21 19:48:38
你确定这是'.png'图片的正确路径吗?他们不在'images /'目录或其他东西? – ceejayoz 2010-06-21 19:51:44
你想要做的第一件事是什么?这是否与一个HTML文件或东西? – OscarRyz 2010-06-21 19:53:17