모든 요소에 onfocus 이벤트 처리기 추가

Question

모든 처리기에서 정의되지 않은 메시지가 나타납니다. 모든 요소에 처리기를 바인딩하고 값을 출력하려고합니다. 이 코드의 문제점은 무엇입니까? 감사!

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

function test(ele){ 
    alert(ele.value); 

} 

Answer 1

기능을 지정해야합니다. 현재로서는 test(window)의 반환 값인 undefined을 할당하고 있습니다.

onfocus = test; 

그런 다음 함수 내부의 요소를 참조 :

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

요소가 더 이상이 같은 매개 변수로 전달되지 않습니다 때문에 당신은, 할당 및 기능을 모두 변경해야

Answer 2

:

test 내부 이벤트 핸들러로

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

, this 당신이 취급하고있는 요소를 참조, 그래서 단지에서 값을 얻을 것이다.

---

현재 접근 방식의 대체 버전은 동일한 test 방법이 될 것이지만, 익명 함수 래퍼 매개 변수로 요소 자체를 전달하는 :

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

Answer 3

닉과 다윗이 모두 지적 , 이벤트 처리기를 지정하는 방식이 올바르지 않습니다. 그러나, 당신이 시도하고있는 것을 달성하기 위해서 (컨텍스트 내에서 전달) 델리게이트 함수를 사용할 수 있습니다. 이처럼 :

delegate 함수가 무엇

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

, 당신의 핸들러 함수가 this의 컨텍스트를 설정하는 전화입니다. 자세한 내용은 Function object 설명서를 참조하십시오. 추가 정보는 Quirksmode에서 The this keyword과 Introduction to events을 사용하는 것이 좋습니다.