이 이벤트 핸들러 설정이 작동하지 않는 이유는 무엇입니까?

-1

여기 여기 내 자바 스크립트 파일 /tmp/js/my.js 내 html 파일 /tmp/test/test.html이 이벤트 핸들러 설정이 작동하지 않는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="../js/my.js" defer> 
    </script> 
    </head> 

    <body> 

    <p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p> 

    Enter your name: <input type="text" id="fname"> 
    <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> 


    </body> 
    </html>

이지만, 이벤트 핸들러의 설정이 작동하지 않습니다. 왜 작동하지 않는가, 그리고 그것을 작동하게하려면 어떻게해야 하는가?

function myFunction1(input) { 
    input.value = input.value.toUpperCase(); 
} 

document.getElementById("fname").onchange = myFunction1;

나는 이벤트 핸들러가 작동

function myFunction2() { 
    var x = document.getElementById("fname"); 
    x.value = x.value.toUpperCase(); 
} 

document.getElementById("fname").onchange = myFunction2;

내 자바 스크립트 파일의 내용을 교체합니다. 두 가지 방법이 왜 이렇게 다른지 궁금합니다.

외부 자바 스크립트 파일 또는 html 파일의 이벤트 처리기 설정을 지정하는 가장 좋은 방법은 무엇입니까?

감사합니다.

출처

2017-12-29 Tim

이벤트 핸들러의 최초의 파라미터가 'Event' 목적을; ''('this ')이 아닙니다. – Xufox

@Xufox 그리고 그게 내가 오늘 직장에서 너무 오래 있었는지 아는거야 :) – Phil

작동하지 않는 이유는 외부 파일에있는 스크립트와 아무 관련이 없습니다. 이것은 DOM 객체에 대한 참조가 인수 (input)로 함수에 전달되고 있다고 가정하기 때문입니다. input은 실제로 이벤트에 대한 참조입니다. 개체 속성 (onchange 등)을 사용하거나보다 현대적이고 표준 기반의 .addEventListener()을 사용하여 설정된 이벤트 처리기는 콜백 함수의 첫 번째 인수로 호출 된 이벤트에 대한 참조를 자동으로 전달합니다.

두 번째 버전은 DOM 객체에 대한 참조에 대한 인수에 의존하지 않고 document.getElementById("fname")으로 DOM 객체에 대한 참조를 올바르게 가져 오기 때문에 작동합니다. 그러나 실제로 이벤트를 트리거 한 DOM 객체에 대한 참조를 얻으려면 특별한 작업을 수행 할 필요가 없습니다.이 객체는 콜백 함수 내에서 this 키워드에 바인딩됩니다.

그 외에도 실제로는 onchange 등과 같은 이벤트 속성을 통해 이벤트를 설정해야합니다. 그 방법은 이벤트 당 하나의 이벤트 처리 기능을 설정하는 데 한계가 있기 때문입니다. 대신 최신 표준을 사용하십시오 element.addEventListener()

마지막으로 텍스트 내용을 모두 대문자로 변경하려면 CSS만으로 수행 할 수있는 JavaScript가 필요하지 않습니다.

그 아래의 예는이 모든 표시 참조 :

// Get your reference to DOM objects that you'll need just once, when the DOM is available 
 
// And, set up events following modern standards: 
 
document.getElementById("fname").addEventListener("change", myFunction); 
 

 
// Event handlers are automatically passed a reference 
 
// to the event as the handler's first argument. 
 
function myFunction(evt) { 
 
    // Inside of an event handler for a DOM object, you can always 
 
    // reference the DOM object that triggered the event via the target property 
 
    // of the event (evt.target in this case) or, even simpler via the "this" keyword. 
 
    console.log("Event: " + evt.type.toUpperCase() + " was triggered by: " + this.nodeName + " " + this.id + " " + evt.target); 
 
    this.value = evt.type; 
 
}

/* You don't need JavaScript to convert content to upper case */ 
 
#fname { text-transform:uppercase; }

<p>This example uses the HTML DOM to assign an "onchange" event to an input element.</p> 
 

 
Enter your name: <input type="text" id="fname"> 
 
<p>When you leave the input field (just hit TAB after inputting some data), the CHANGE event callback function is triggered.</p>

출처

2017-12-29 04:08:28

고마워. 이 예제는 https://stackoverflow.com/a/18893556/156458에 따라 DOM 객체에 대한 참조가 이벤트 처리 함수'check()'에 전달됩니다. 'check()'가 대신 이벤트를 받아들이려고하지 않는 이유는 무엇입니까? – Tim

[첫 번째 매개 변수를 이벤트 처리기] (https://stackoverflow.com/q/2414081/4642212)를 참조하십시오. 이벤트 속성은 매우 다릅니다. – Xufox

@Tim이 예제에서는 HTML 특성을 사용하여 이벤트 처리를 설정합니다.이 처리 방법은 더 이상 사용하지 않아야하는 20 년 된 방법입니다. 이 접근법은 함수를 참조하지 않고 함수를 직접 호출하므로 이벤트는 자동으로 함수에 전달되지 않습니다. –

이 이벤트 핸들러 설정이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제