Question

我正在学习纯粹的javascript。目前我正在探索DOM对象，如WINDOW，DOCOMENT，ELEMENT等......

我正在创建文本字段并想要将函数绑定到每个元素的事件（例如onfocus或onblur），并将self元素作为参数传递（如'this'）。

以下脚本创建文本字段并将其绑定到specipic函数。

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';
}


This function recognizes given argument as element and sets its ID to value attribute, but it not affects to background color.
What have I mess? 


Here is the entire HTML code:


<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背景（如数学，字符串，函数，数组，经典等）。在那里我想要你的建议：是否有必要深入研究javascript细节而不是跳转到JQuery？

提前致谢。

Answer 1

这里的问题是引用函数和调用它之间的区别。无论何时添加括号，都可以调用函数并返回结果，默认结果为undefined。

在事件处理程序中，您只想引用该函数

txt.addEventListener('focus', txt_focus);

如果必须传递参数，则使用匿名函数

txt.addEventListener('focus', function() {
    txt_focus(txt);
});

但是这里没有意义，因为你传递了元素，你可以在函数内部使用this来访问

txt.addEventListener('focus', txt_focus);

function txt_focus() {
    var txt = this; // the element
}

无法将事件绑定到由脚本创建的元素

1 个答案: