[javascript] 입력에 대해 프로그래밍 방식으로 onchange 이벤트를 강제하는 방법은 무엇입니까?

Program / 글쓴이

입력에 대해 프로그래밍 방식으로 onchange 이벤트를 강제하는 방법은 무엇입니까?

나는 다음과 같은 것을 시도했다.

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메서드 를 호출 하거나 onchange요소 의 속성을 설정하여 등록되었는지 여부에 관계없이 이벤트 리스너가 트리거됩니다 .

이벤트를 버블 링하려면 Event생성자에 두 번째 인수를 전달해야합니다 .

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

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

답변

jQuery에서는 주로 다음을 사용합니다.

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

답변

ugh eval을 아무것도 사용하지 마십시오 . 글쎄요, 몇 가지가 있지만 매우 드뭅니다. 대신 다음을 수행합니다.

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

더 많은 옵션을 보려면 여기를 참조하십시오.
http://jehiah.cz/archive/firing-javascript-events-properly

답변

어떤 이유로 ele.onchange ()가 내 페이지의 IE에서 “메서드를 찾을 수 없음”을 던지고 있으므로 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);
    }
}

그러나 나는 onchange ()가 작동 해야하는지 확인하는 테스트 페이지를 만들었습니다.

<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 이벤트에 대해 아무것도 선언하지 않았기 때문입니다. 그러나 fireEvent는 여전히 작동합니다.

답변

이것은 IE와 Chrome에 대한 가장 정답입니다.

javascript=>

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>