开发者

adding onfocus event handler to every element

I'm getting an undefined message on all of my handlers. I want to bind a handler to every element and want to output the value. What is wrong with this code? Thanks!

 for (var i = 0; i < document.forms[0].elements.length; i++ ){
  document.forms[0].elements[i].onfocus = test(this);
 }

 function test(ele){
 开发者_Python百科 alert(ele.value);

 }


You need to assign a function. At the moment you are assigning the return value of test(window) which is undefined.

onfocus = test;

Then reference the element inside the function:

function test(){
    alert(this.value);
}


You need to change both the assignment and the function, since the element will no longer be passed in as a parameter, like this:

for (var i = 0; i < document.forms[0].elements.length; i++ ){
  document.forms[0].elements[i].onfocus = test;
}
function test(){
  alert(this.value);
}

As an event handler, this inside test will refer to the element you're dealing with, so just get the value from that.


The alternative version of your current approach would be the same test method, but with an anonymous function wrapper to pass the element itself as a parameter:

for (var i = 0; i < document.forms[0].elements.length; i++ ){
  ddocument.forms[0].elements[i].onfocus = function() { test(this); };
}
function test(ele){
  alert(ele.value);
}


As both Nick and David pointed out, the way you assign the event handler is not correct. However, to achieve what you are trying (pass in a context) you can use a delegate function. Like this:

for (var i = 0; i < document.forms[0].elements.length; i++ ){
  var ele = document.forms[0].elements[i];
  ele.onfocus = delegate(ele, test);
}

function delegate(obj, handler) {
  return function () {
    handler.call(obj);
  }
}

function test() {
  alert(this.value);
}

What the delegate function does, is call your handler function setting the context of this. See the documentation for the Function object for further information. For even further reading, I recommend The this keyword and Introduction to events on Quirksmode.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜