Как программно вызвать событие onchange на входе?

Как программно вызвать событие onchange на входе?

Я пробовал что-то вроде этого:

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

Но моя конечная цель - запустить любые функции слушателя, а это, похоже, не работает. Также не обновляется просто атрибут «значение».

Создайте 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 ()
• Мероприятие()

В jQuery я в основном использую:

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

тьфу, не используйте 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>()where <EVENTNAME>- имя вашего события, и это вызовет все события с<EVENTNAME>

Для запуска любого события в Javascript.

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

если вы используете 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();
}

Поскольку вы уже пишете метод JavaScript, который изменит его, нужно вызвать только 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");