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

Question

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

我尝试过这样的事情:

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

但我的最终目标是触发任何侦听器功能,这似乎不起作用.也不仅仅是更新'value'属性.

Answer 1

创建一个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 });

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

• dispatchEvent()
• 事件()

Answer 2

在jQuery中我主要使用:

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

Answer 3

呃不要用eval做任何事情.嗯,有一些事情,但它们非常罕见.相反,你会这样做:

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

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

Answer 4

由于某种原因,ele.onchange()在我的页面上为我在IE中抛出了一个"找不到方法"的expception,所以我最终使用了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事件声明任何内容.但是火灾事件仍然有效.