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

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

我试过这样的方法:

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

但是我的最终目标是激活任何监听器功能，这似乎没有工作。仅仅更新“ value”属性也不行。

290884 次浏览
小开

如果你使用 jQuery，你会:

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

或者阿贾克斯女士:

$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();
}

因为您已经编写了一个 JavaScript 方法来进行更改，所以只需要调用另外一行代码即可。

或者，如果使用 Microsoft AJAX 框架的 是，则可以通过以下方式访问所有事件处理程序:

$get('elementId')._events

它允许您执行一些反射样式的工作，以找到要触发的正确事件处理程序。

小开

呃，不要用 eval 来表示 什么都行。好吧，确实有一些东西，但是它们是非常罕见的。 相反，你会这样做:

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

点击这里查看更多选项: Http://jehiah.cz/archive/firing-javascript-events-properly

小开

从 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);
}
}

当然，您可以将 $. 浏览器替换为自己的浏览器检测方法，以使其独立于 jQuery。

使用此函数:

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

这基本上会触发真正的 DOM 事件，就好像事情真的发生了变化一样。

小开

由于某些原因，ele.onchange ()在我的页面的 IE 中抛出了一个“ method not found”异常，所以我最终使用了链接 科尔顿提供的这个函数，并调用了 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 还能用。

小开

在 jQuery 中，我主要使用:

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

使用 JQuery，您可以执行以下操作:

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


// for the element which uses class name
$(".class_name").trigger("change");
小开
最佳答案

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

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

这将触发事件侦听器，而不管它们是通过调用 addEventListener方法注册的，还是通过设置元素的 onchange属性注册的。

默认情况下，像这样创建和分派的事件不会像通常那样向 DOM 树传播(冒泡)。

如果希望事件冒泡，则需要向 Event构造函数传递第二个参数:

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

浏览器兼容性信息:

小开

这是对 IE 和 Chrome 最正确的回答:

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

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

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

如果使用以下代码片段添加所有事件:

//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>的所有事件


提交答案