Trigger dom node Event code manually to trigger dom nodes

Trigger dom node Event code manually to trigger dom nodes

   
During code crawling, I encountered a strange problem. You need to manually modify the select value and then manually trigger the select change event. However, the trigger triggered by the trigger and onchange () Events found on the network is not executed, so you have to continue searching.
    
The stackoverflow website also saw the answers from foreign experts and solved the problems encountered.
    
Original post address: http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
 

The code for manual triggering is as follows:

/** * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically * by testing for a 'synthetic=true' property on the event object * @param {HTMLNode} node The node to fire the event handler on. * @param {String} eventName The name of the event without the "on" (e.g., "focus") */function fireEvent(node, eventName) {    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems    var doc;    if (node.ownerDocument) {        doc = node.ownerDocument;    } else if (node.nodeType == 9){        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE        doc = node;    } else {        throw new Error("Invalid node passed to fireEvent: " + node.id);    }     if (node.dispatchEvent) {        // Gecko-style approach (now the standard) takes more work        var eventClass = "";        // Different events have different event classes.        // If this switch statement can't map an eventName to an eventClass,        // the event firing is going to fail.        switch (eventName) {            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.            case "mousedown":            case "mouseup":                eventClass = "MouseEvents";                break;            case "focus":            case "change":            case "blur":            case "select":                eventClass = "HTMLEvents";                break;            default:                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";                break;        }        var event = doc.createEvent(eventClass);        var bubbles = eventName == "change" ? false : true;        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.        event.synthetic = true; // allow detection of synthetic events        node.dispatchEvent(event, true);    } else  if (node.fireEvent) {        // IE-old school style        var event = doc.createEventObject();        event.synthetic = true; // allow detection of synthetic events        node.fireEvent("on" + eventName, event);    }};

The html code and call are as follows:

<a href="http://www.google.com" onclick="alert('clicked')" target="_blank">Go to google</a><button>Trigger event</button>document.getElementsByTagName("button")[0].onclick = function() {    fireEvent(document.getElementsByTagName("a")[0], "click");}