未捕获的TypeError：对象不是函数（调用onchange函数）

Question

My code is big so I will keep it short. I am tring to fire onchange event of Select atribute. Problem is that when I fire it I got this error:

Uncaught TypeError: object is not a function

Since my code is big I will show to you codes where I decalare onchange event and when I fire it.

Here is when onchange function is declared:

 function e(b, c) {
        function a() {
            if (b.current_modal) {
                b.current_modal.className = "hide"
            }
            f("overlay").className = "hide"
        }
        jigsaw.UI.close_lightbox = a;
        Util.$("overlay").click(a);
        Util.$("set-parts").change(function () {
            if (this.parts != 9) {
                jsaw.set_image("images/puzzle.jpeg")
            } else {
                jsaw.set_image("images/puzzle1.jpeg")
            }
            c.emit(jigsaw.Events.PARTS_NUMBER_CHANGED, +this.value);
            c.emit(jigsaw.Events.RENDER_REQUEST)
        });
        Util.$("game-options").click("a", function (h) {
            if (jigsaw.Events[this.id]) {
                h.preventDefault();
                c.emit(jigsaw.Events[this.id])
            }
        })
    }

and here is when I fire onchange event:

show_time: function () {
           /*.....*/

        javascript: document.getElementById("date").innerHTML = ScoreResult;
        document.getElementById("set-parts").selectedIndex = 1;
        document.getElementById('set-parts').onchange();


    }

Answer 1

I don't use jquery, but in JavaScript there is a difference on how addEventListener( eventName , ...) and on*eventName* = function(){} works.

I suppose that not modern library will use on*eventName* interface for one simple reason: I can hold just a single listener. But the on*eventName* are still there to support legacy code.

Now, in your particular case, when you add the event your library is using the addEventListener/removeEventListener/dispatchEvent underline DOM interface. This will not set up the legacy on*eventName* property to your callback, so the only way you can directly call it it by dispatching an event with the DOM method dispatchEvent (or your library wrapper) with an Event object with type 'change'. That is what "new Event('change')" does. If you need to pass extra properties to the event you can create it like this:

new Event('change', { foo : 1, bar : 'hello, world!' })

and those properties will be available in your listener callback arguments[0] under whichever name you set your argument (in your case, you left it empty).