如何以编程方式强制输入onchange事件?

创建一个 Event 对象并将其传递给 dispatchEvent 要素的方法:

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

这将触发事件侦听器,无论它们是否通过调用 addEventListener 方法或通过设置 onchange 元素的属性。

建造商:

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

有关浏览器兼容性的信息:

• dispatchEvent()
• Event()

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

呃,不要用eval来评估 任何东西 . 嗯,有一些东西,但它们非常罕见。 相反,您应该这样做:

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

在此处查看更多选项: http://jehiah.cz/archive/firing-javascript-events-properly

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仍然有效。

摘自 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事件,就好像有什么东西实际发生了变化一样。

这是IE和Chrome最正确的答案:

javascript=>

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

//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>

如果您使用的是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();
}

是 使用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");

用于触发Javascript中的任何事件。

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