ฉันจะบังคับให้เหตุการณ์ onchange กับอินพุตโดยทางโปรแกรมได้อย่างไร

ฉันจะบังคับให้เหตุการณ์ onchange กับอินพุตโดยทางโปรแกรมได้อย่างไร

ฉันได้ลองทำสิ่งนี้แล้ว:

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

แต่เป้าหมายสุดท้ายของฉันคือการเริ่มการทำงานของผู้ฟังและดูเหมือนจะไม่ได้ผล ไม่เพียงแค่อัปเดตแอตทริบิวต์ "value"

สร้าง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 () กำลังส่ง expception "ไม่พบวิธีการ" ให้ฉันใน 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>()ว่า<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");