CODEWITHSUNDEEP
javascriptclasseventsconstructoraddeventlistener
Ian.V
Ian.V

Reputation: 375

Javascript classes and Customevents

I want to know how to add a custom event to a instance of a class and call it for that instance.

My code right now:

var event = document.createEvent('event');
event.initEvent('build', true, true);
class link {
    constructor(Href, Text = "Click me", Target = "__blank") {
        this.href = Href;
        this.text = Text
        this.target = Target;
        this.eventElm = document.createElement("event");
        //this.event = document.createEvent('event');
        //this.event.initEvent('build', true, true);
    }

}

class creator {
    constructor(Objs) {
        for(var i in Objs) {
            window.document.body.innerHTML += "<a href="+Objs[i].href+">"+Objs[i].text+"</a><br>";
            if(Objs[i].href == "#") {
                Objs[i].eventElm.dispatchEvent(event);
            }
        }
    }
}

var l = new link("#");
var lo = new link("#");
var ar = [];
ar.push(l);
ar.push(lo);


l.eventElm.addEventListener('build', function(e) {
    console.log(e);
}, false);
//l.eventElm.dispatchEvent(event);


window.onload = function () {
    var crea = new creator(ar);
    console.log(l.href);
}

This code returns the error

eventtest.html:24 Uncaught DOMException: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. at new creator (http://localhost/eventtest.html:24:25) at window.onload (http://localhost/eventtest.html:44:16)

I want to do this in plain javascript no jquery. Thanks for taking the time to read this and hopefully help me.

Upvotes: 1

Views: 56

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074058

You're declaring a global event variable. But most browsers (IE, Edge, Chrome) already have a global event variable (the currently-being-dispatched event). So you end up trying to re-dispatch the load event that's being handled.

This is one of the many reasons not to put your code at global scope. Instead, wrap it in a scoping function:

(function() {
    // Your code here...
})();

Now, your event variable isn't conflicting with the global event.

Live Example:

(function() {
    var event = document.createEvent('event');
    event.initEvent('build', true, true);
    class link {
        constructor(Href, Text = "Click me", Target = "__blank") {
            this.href = Href;
            this.text = Text
            this.target = Target;
            this.eventElm = document.createElement("event");
            //this.event = document.createEvent('event');
            //this.event.initEvent('build', true, true);
        }

    }

    class creator {
        constructor(Objs) {
            for(var i in Objs) {
                window.document.body.innerHTML += "<a href="+Objs[i].href+">"+Objs[i].text+"</a><br>";
                if(Objs[i].href == "#") {
                    Objs[i].eventElm.dispatchEvent(event);
                }
            }
        }
    }

    var l = new link("#");
    var lo = new link("#");
    var ar = [];
    ar.push(l);
    ar.push(lo);


    l.eventElm.addEventListener('build', function(e) {
        console.log(e);
    }, false);
    //l.eventElm.dispatchEvent(event);


    window.onload = function () {
        var crea = new creator(ar);
        console.log(l.href);
    }
})();

Separately: You probably want to create a new event object each time you dispatch your event, rather than having that single global-to-your-code event variable.

Upvotes: 1

Related Questions