Check if event is initialised and has listeners without jQuery

Question

I read a lot of answers here in Stack Overflow about finding events and event listeners but none suited me.

Probably I am missing something or doing something wrong because I am new to JS.

I am binding some events on the document like so:

var eventNames = [
    'feedbackGiven',
    'emailEntered',
    'viewedOptin',
    'agreedOptin'
];

var createEvents = function (eventNames){

    for (var i=0; i < eventNames.length; i++){
        // Create and Init the events to their types
        var event = document.createEvent('Event');
        event.initEvent(eventNames[i], true, true);
    }

};

Later on I also bind some listeners but lets keep it short for now.

Now I want to test my code and see if indeed it creates the events. I am using Qunit for testing and I want to assert if the events are indeed created and initialised.

Is there a way to achieve that?

What exactly are you trying to accomplish here? You create events, but don't do anything with them... Maybe tell us the big picture. I have a feeling this is a XY-problem of some sort. — Pinoniq
– Pinoniq, Commented Jul 18, 2014 at 9:33
@Pinoniq I am creating events from one module and then from other module I ll bind listeners to them later. Right now I just want to test that the events are created. — Jimmy Kane
– Jimmy Kane, Commented Jul 18, 2014 at 9:35
You don't need to 'create' the events. Just bind an EvenListener to an eventname. and then later on, fire an event with that name. — Pinoniq
– Pinoniq, Commented Jul 18, 2014 at 9:36
@Pinoniq is right; consider what a Javascript event is: nothing more than an Object. It has its own lifecycle just like any other object: it is fired with a .dispatchEvent which invokes it on any listeners registered for the provided event.type (which is a string) — blgt
– blgt, Commented Jul 18, 2014 at 9:42
@Pinoniq I think I am close to getting this. Thanks checking your answer — Jimmy Kane
– Jimmy Kane, Commented Jul 18, 2014 at 9:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

There is no problem

You want to test if the events are created. But I don't think you understand how events work.

You are creating an Event object, but not doing anything with it.

In fact, all but the last event object are unavailable after your for-loop (you overwrite the event var).

But back to your "check or an event is created" problem. You don't need to create an event to be able to use it.

Simply add an eventListner to an event you want to listen to:

document.addEventListener('myCustomEvent', function(e) {
    console.log('The event object: ');
    console.log(e); //the event object
});

then later on in your code, we can dispatch an event:

var e = new Event('myCustomEvent');
document.dispatchEvent(e);

that's it. The event object will be passed to all the callbacks attached with addEventListener

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 18, 2014 at 9:44

Pinoniq

1,3859 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimmy Kane Over a year ago

Thanks got it! Thanks very much! I did not indeed need to create an event not init it. Now i see how it works. The MDN examples where providing hints on init so I got confused that the events somehow needed to be registered or so.

Pinku · Accepted Answer · 2014-07-18 09:41:42Z

-1

In DOM level 2 you can't, in level 3 (non yet supported) you will have eventListenerList that will do the job.

Actually you have to take an array for events.

You can build your addevent method:

var events = [];    
var addEvent = function (event, node, fn) {

    var i = 0, len = events.length, nullix = -1;
    while (i != len) {
        if (events[i] == null) {
            if (nullix == -1) nullix = i;
            i++;
            continue;
        }
        if (events[i].event == event &&
            events[i].node == node &&
            events[i].fn == fn) {
            return this;
        }
        i++;
    }

    if (nullix != -1) {
        events[nullix] = {
            event: event,
            node: node,
            fn: fn
        }
    } else {
        events[events.length] = {
            event: event,
            node: node,
            fn: fn
        };
    }
    node.addEventListener(event, fn);

};

answered Jul 18, 2014 at 9:41

Pinku

31 bronze badge

5 Comments

Pinoniq Over a year ago

not really applicable here. You are allready binding a function to an event. But that is not what the question is about.

Pinku Over a year ago

Ok, this is a complete example, but it answer to the question, in DOM lvl2 there's no way to query events.

Pinoniq Over a year ago

euhmm.. what do you mean query events?

Pinku Over a year ago

I mean "list all events connected to an element". Jimmy wants to khow: "Now I want to test my code and see if indeed it creates the events"

Pinoniq Over a year ago

you are talking about the added eventListeners. He was talking about 'event names' ;)

Collectives™ on Stack Overflow

Check if event is initialised and has listeners without jQuery

2 Answers 2

There is no problem

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

There is no problem

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related