我正在学习一个纯Java脚本。目前我正在探索DOM对象，如窗口、文档、元素等……
我正在动态创建文本字段，并希望将函数绑定到每个元素的事件(例如onfocus或onblur)，并将self元素作为参数传递(如‘This’)。
以下脚本创建文本字段并将其绑定到特定函数。
var txt= document.createElement("input");
txt.type="text";
txt.value='0';
txt.size=12;
txt.style.textAlign="right";
txt.id="txt_"+self.count;
txt.addEventListener('focus', txt_focus(txt));
txt.addEventListener('blur', txt_blur(txt));下面是其功能：
function txt_focus(txt){
txt.value=txt.id;
txt.style.backgroundColor='yellow';
}
function txt_blur(txt){
txt.style.backgroundColor='white';
}此函数将给定的参数识别为元素，并将其ID设置为Value属性，但不影响背景颜色。我错过了什么？
以下是完整的HTML代码：
<html>
<head>
<script type="text/javascript">
self.count =0;
function txt_focus(txt){
txt.value=txt.id;
txt.style.backgroundColor='yellow';
}
function txt_blur(txt){
txt.style.backgroundColor='white';
}
function removeGroup(){
if (self.count<1) {return;}
var parent=document.getElementById("myDiv");
var fs_x =document.getElementById('fs_'+self.count);
parent.removeChild(fs_x);
self.count--;
}
function addGroup(){
if (self.count>11) {return;}
self.count++;
var parent=document.getElementById("myDiv");
var fs=document.createElement("fieldSet");
fs.style.borderRadius="7px";
fs.style.height="45px";
fs.id='fs_'+self.count;
var l=document.createElement("legend");
l.innerHTML="interval_"+self.count;
l.style.color="darkgreen";
l.style.fontStyle="italic";
fs.appendChild(l);
var d1= document.createElement("input");
d1.type="date";
d1.value='2014-05-01';
d1.id='d1_'+self.count;
fs.appendChild(d1);
var d2= document.createElement("input");
d2.type="date";
d2.value='2014-05-22';
d2.id='d2_'+self.count;
fs.appendChild(d2);
var txt= document.createElement("input");
txt.type="text";
txt.value='0';
txt.size=12;
txt.style.textAlign="right";
txt.id="txt_"+self.count;
txt.addEventListener('focus', txt_focus(txt));
txt.addEventListener('blur', txt_blur(txt));
fs.appendChild(txt);
parent.appendChild(fs);
fs.scrollIntoView();
}
</script>
</head>
<body>
<input type="hidden" id="hd1" value="0"> </input>
<button onclick="addGroup();"> Add a group</button>
<button onclick="removeGroup();"> Remove a group</button>
<div id="myDiv" style="padding:7px;position:relative;margin-top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;">
</div>
</body>
</html>纯JavaScript需要解决方案，但JQuery解决方案也很有趣。
我的第二个问题是：
我有一些基本的JavaScript(如数学、字符串、函数、数组、类等)的背景知识，我希望您能给我一些建议：有必要深入研究Java细节而不是跳到JQuery吗？
1条答案
按热度按时间ogq8wdun1#
这里的问题是引用函数和调用函数之间的区别。每当添加括号时，都会调用函数并返回结果，默认结果为
undefined。在事件处理程序中，您只想引用函数
如果必须传递参数，则可以使用匿名函数
但在这里这没有意义，因为您传递的是元素，您可以在函数中使用
this访问该元素