입력에서 변경 시 이벤트를 프로그래밍 방식으로 강제하려면 어떻게 해야 합니까?

입력에서 변경 시 이벤트를 프로그래밍 방식으로 강제하려면 어떻게 해야 합니까?

입력에서 변경 시 이벤트를 프로그래밍 방식으로 강제하려면 어떻게 해야 합니까?

나는 이런 것을 시도해봤어요

var code = ele.getAttribute('onchange');
eval(code);

하지만 제 최종 목표는 청취자 기능을 사용하는 것이고, 그것은 효과가 없는 것 같습니다.'value' 속성만 업데이트하는 것도 아닙니다.

Event이의를 제기하고 그것을 에 전달합니다.dispatchEvent요소의 방법:

var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

수신기가 .addEventListener는 setting 을 합니다.onchange원소의 성질

---

기본적으로 이와 같이 생성되고 디스패치되는 이벤트는 이벤트가 일반적으로 하는 것처럼 DOM 트리에 전파(버블)되지 않습니다.

두 Event생성자:

var event = new Event('change', { bubbles: true });

---

브라우저 호환성에 대한 정보:

• dispatch이벤트()
• 이벤트()

jQuery에서 주로 사용하는 항목:

$("#element").trigger("change");

윽, 어떤 것에도 평가를 사용하지 마세요.글쎄요, 어떤 것들은 있지만, 아주 희귀한 것들입니다.오히려 이렇게 하는 것이 좋습니다.

document.getElementById("test").onchange()

자세한 옵션은 여기를 참조하십시오. http://jehiah.cz/archive/firing-javascript-events-properly

어떤 이유에서인지 elle.onchange()는 IE에서 "method not found" 예외를 내 페이지에 던지고 있으므로 Kolten이 제공한 링크에서 이 기능을 사용하고 fireEvent(ele, 'change')를 호출했습니다.

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

그러나 변경() 시 호출이 작동하는지 확인하는 테스트 페이지를 만들었습니다.

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

편집: ele.onchange()가 작동하지 않은 이유는 onchange 이벤트에 대해 실제로 선언한 내용이 없었기 때문입니다.하지만 화재 이벤트는 여전히 작동합니다.

IE 및 Chrome에 대한 가장 정확한 답변:

var element = document.getElementById('xxxx');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);

QUnit 아래쪽에서 가져옴

function triggerEvent( elem, type, event ) {
    if ( $.browser.mozilla || $.browser.opera ) {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem.dispatchEvent( event );
    } else if ( $.browser.msie ) {
        elem.fireEvent("on"+type);
    }
}

물론 $.browser 항목을 자신의 브라우저 탐지 방법으로 대체하여 jQuery를 독립적으로 만들 수 있습니다.

이 기능을 사용하려면:

var event;
triggerEvent(ele, "change", event);

이는 기본적으로 실제 DOM 이벤트를 실제로 변경한 것처럼 발화합니다.

이 코드 조각으로 모든 이벤트를 추가하는 경우:

//put this somewhere in your JavaScript:
HTMLElement.prototype.addEvent = function(event, callback){
  if(!this.events)this.events = {};
  if(!this.events[event]){
    this.events[event] = [];
    var element = this;
    this['on'+event] = function(e){
      var events = element.events[event];
      for(var i=0;i<events.length;i++){
        events[i](e||event);
      }
    }
  }
  this.events[event].push(callback);
}
//use like this:
element.addEvent('change', function(e){...});

그럼 그냥 사용하시면 됩니다.element.on<EVENTNAME>()<EVENTNAME>는 당신의 이벤트의 이름이고, 그것은 다음과 같은 모든 이벤트를 호출할 것입니다.<EVENTNAME>

change건의 input요소는 사용자에 의해서만 직접 트리거됩니다.변경 이벤트를 프로그래밍 방식으로 트리거하려면 다음 작업을 수행해야 합니다.dispatch변경 이벤트

문제는 어디서 어떻게 하느냐 입니다.

"where"는 코드가 많이 실행되는 바로 그 순간에 변경 이벤트가 트리거되기를 원하며, "How"는 다음 구문의 형태입니다.

const myInput = document.getElementById("myInputId");

function myFunc() {
  //some codes
  myInput.dispatchEvent(new Event("change"));
}

이렇게 변경 이벤트를 프로그래밍 방식으로 생성했습니다.Event건설업자와 파견업체는dispatchEvent()방법.그래서 언제든지myFunc()method가 호출됩니다.//some codes실행되고, 우리의 합성 변경 이벤트가 원하는 입력 요소에서 즉시 트리거됩니다.

중요한 결과:여기서.change이벤트는 다음을 실행하여 트리거됩니다.//some codes인에myFunc()입력을 변경하는 대신value사용자에 의해 (기본 모드).

jQuery를 사용하는 경우 다음을 얻을 수 있습니다.

$('#elementId').change(function() { alert('Do Stuff'); });

또는 MS AJAX:

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

또는 요소의 원시 HTML에서:

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

문제를 다시 읽어보니 해야 할 일을 잘못 읽은 것 같습니다.변경 이벤트를 강제로 수행하는 방식으로 DOM 요소를 업데이트할 방법을 찾지 못했습니다. 다음과 같은 별도의 이벤트 핸들러 방법을 사용하는 것이 가장 좋습니다.

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

변경을 수행할 자바스크립트 메소드를 이미 작성 중이므로 추가로 호출할 회선은 1개뿐입니다.

또는 Microsoft AJAX 프레임워크를 사용하는 경우 다음을 통해 모든 이벤트 핸들러에 액세스할 수 있습니다.

$get('elementId')._events

이를 통해 적절한 이벤트 처리기를 찾기 위해 몇 가지 반사 스타일 작업을 수행할 수 있습니다.

JQuery를 사용하여 다음을 수행할 수 있습니다.

// for the element which uses ID
$("#id").trigger("change");

// for the element which uses class name
$(".class_name").trigger("change");

자바스크립트에서 이벤트를 발생시키기 위해서 입니다.

 document.getElementById("yourid").addEventListener("change", function({
    //your code here
})

언급URL : https://stackoverflow.com/questions/136617/how-do-i-programmatically-force-an-onchange-event-on-an-input