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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Создайте объект 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 ()
• Event ()

Answer 3

тьфу, не используйте eval для ничего . Ну, есть определенные вещи, но они крайне редки. Скорее вы бы сделали это:

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

Посмотрите здесь, чтобы получить больше возможностей: http://jehiah.cz/archive/firing-javascript-events-properly

Answer 4

По какой-то причине 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"/>

Edit: причина, по которой ele.onchange () не работал, была в том, что я ничего не объявил для события onchange. Но fireEvent все еще работает.

Answer 5

взято со дна 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, как будто что-то действительно изменилось.

Answer 6

Это самый правильный ответ для IE и Chrome ::

javascript=>

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

Answer 7

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

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

Answer 8

Используя JQuery, вы можете сделать следующее:

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

// for the element which uses class name
$(".class_name").trigger("change");

Answer 9

если вы используете 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 Framework, вы можете получить доступ ко всем обработчикам событий с помощью:

$get('elementId')._events

Это позволит вам выполнить некоторые работы в стиле отражения, чтобы найти подходящий обработчик (и) для запуска.