Làm cách nào để bắt buộc lập trình một sự kiện thay đổi trên một đầu vào?

Làm cách nào để bắt buộc lập trình một sự kiện thay đổi trên một đầu vào?

Tôi đã thử một cái gì đó như thế này:

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

Nhưng mục tiêu cuối cùng của tôi là kích hoạt bất kỳ chức năng lắng nghe nào và điều đó dường như không hoạt động. Không chỉ cập nhật thuộc tính "giá trị".

Tạo một Eventđối tượng và chuyển nó vào dispatchEventphương thức của phần tử:

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

Điều này sẽ kích hoạt trình nghe sự kiện bất kể họ đã được đăng ký bằng cách gọi addEventListenerphương thức hay bằng cách đặt thuộc onchangetính của phần tử.

Nếu bạn muốn sự kiện nổi bong bóng, bạn cần truyền đối số thứ hai cho hàm Eventtạo:

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

Thông tin về khả năng tương thích của trình duyệt:

• DispatchEvent ()
• Biến cố()

Trong jQuery, tôi chủ yếu sử dụng:

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

ugh không sử dụng eval cho bất cứ điều gì . Chà, có những thứ nhất định, nhưng chúng cực kỳ hiếm. Thay vào đó, bạn sẽ làm điều này:

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

Xem tại đây để có thêm tùy chọn: http://jehiah.cz/archive/firing-javascript-events-properly

Vì một số lý do ele.onchange () đang ném một lỗi "không tìm thấy phương pháp" cho tôi trong IE trên trang của tôi, vì vậy tôi đã kết thúc sử dụng hàm này từ liên kết Kolten cung cấp và gọi fireEvent (ele, 'change'), hàm này đã hoạt động :

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

Tuy nhiên, tôi đã tạo một trang thử nghiệm xác nhận rằng lệnh gọi onchange () hoạt động:

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

Chỉnh sửa: Lý do ele.onchange () không hoạt động là vì tôi đã không thực sự khai báo bất cứ điều gì cho sự kiện onchange. Nhưng fireEvent vẫn hoạt động.

Đây là câu trả lời đúng nhất cho IE và Chrome ::

javascript=>

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

Lấy từ cuối 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);
    }
}

Tất nhiên, bạn có thể thay thế nội dung $ .browser thành các phương pháp phát hiện trình duyệt của riêng bạn để làm cho nó độc lập với jQuery.

Để sử dụng chức năng này:

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

Về cơ bản, điều này sẽ kích hoạt sự kiện DOM thực như thể một cái gì đó đã thực sự thay đổi.

Nếu bạn thêm tất cả các sự kiện của mình bằng đoạn mã này:

//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){...});

thì bạn chỉ có thể sử dụng element.on<EVENTNAME>()đâu <EVENTNAME>là tên sự kiện của mình và điều đó sẽ gọi tất cả các sự kiện với<EVENTNAME>

Để kích hoạt bất kỳ sự kiện nào trong Javascript.

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

nếu bạn đang sử dụng jQuery, bạn sẽ có:

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

hoặc MS AJAX:

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

Hoặc trong HTML thô của phần tử:

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

Sau khi đọc lại câu hỏi, tôi nghĩ rằng tôi đã đọc những gì phải làm. Tôi chưa bao giờ tìm thấy cách cập nhật phần tử DOM theo cách sẽ buộc một sự kiện thay đổi, điều tốt nhất bạn đang làm là có một phương thức xử lý sự kiện riêng biệt, như sau:

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

Vì bạn đã viết một phương thức JavaScript sẽ thực hiện việc thay đổi nên chỉ có 1 dòng bổ sung để gọi.

Hoặc, nếu bạn đang sử dụng khung Microsoft AJAX, bạn có thể truy cập tất cả các trình xử lý sự kiện thông qua:

$get('elementId')._events

Nó sẽ cho phép bạn thực hiện một số thao tác theo kiểu phản chiếu để tìm (các) trình xử lý sự kiện phù hợp để kích hoạt.

Sử dụng JQuery bạn có thể làm như sau:

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

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