순수 자바 스크립트는 입력 값 변경을 수신합니다.

입력을 수신하는 상수 함수를 만들 수있는 방법이 있습니까? 입력 값이 변경되면 즉시 무언가가 트리거됩니까?

순수한 자바 스크립트, 플러그인, 프레임 워크를 사용하지 않는 것을 찾고 있는데 HTML을 편집 할 수 없습니다.

예를 들면 다음과 같습니다.

input의 값을 변경하면 MyObject이 함수가 실행됩니다.

도움이 필요하세요?

이것이 바로 이벤트 입니다.

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

기본 예로서 ...

HTML :

<input type="text" name="Thing" value="" />

스크립트:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

여기 바이올린이 있습니다 : http://jsfiddle.net/Niffler/514gg4tk/

실제로 틱된 대답은 정확히 맞지만 대답은 ES6모양 이 될 수 있습니다 .

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

또는 아래와 같이 작성할 수 있습니다.

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

기본 사용법

el.addEventListener('input', function () {
    fn();
});

그러나 JS를 통해 입력 값을 수동으로 변경할 때 이벤트를 발생 시키려면 사용자 정의 이벤트 ( 'myEvent'\ 'ev'등과 같은 모든 이름)를 사용해야합니다. 양식 'change'또는 'input'이벤트를 수신해야하는 경우 JS를 통해 입력 값을 변경합니다. 사용자 지정 이벤트의 이름을 'change'\ 'input'으로 지정할 수 있으며 작동합니다.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

2020 년의 또 다른 접근 방식은 다음을 사용할 수 있습니다 document.querySelector().

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});

id 대신 제목을 사용하여 요소를 식별하고 아래와 같이 코드를 작성하십시오.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});