Understanding event handling and callbacks in JavaScript

Question

I was messing around with IndexedDB and I realised that I don't really get event handling in JavaScript.

So here's the code:

var request = indexeddb.open(bla, version);

request.onsuccess = function (event) {  };

So the open-method returns a IDBOpenDBRequest object, which, according to Mozillas site, inherits from IDBRequest, which apart from properties and methods also has event handlers, one of them being onsuccess:

https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest.onsuccess

So on the Mozilla site, onsuccess is just function () { }

Now, when the database was opened successfully, the onsuccess event fires and the appropriate event handler is called, in this case the function that I defined, but how exactly does that happen?

The request variable contains an instance of the IDBOpenDBRequest. So when I write request.onsuccess = somefunction(), am I overwriting the default function of the IDBRequest class?

I don't get why I can write request.onsuccess = somefunction(event) { } and how the event is passed to that function.

EDIT:

function myObect() {
    this.open = function(a,b,c) {
        if (c > 20) {
            this.success("String");
        }
    };
};


var myrequest = new myObect();
myrequest.open(4,2,21);
myrequest.success = function (ev) {
    console.log(ev);
};

Well, at some point something calls this.onsuccess(someEventObject);, where this refers to the request object. There is no magic involved here. What exactly are you confused about? — Felix Kling
– Felix Kling, Commented Oct 11, 2014 at 19:18
okay, so, during the execution of the open function, this.onsuccess(eventobject) ist called... but how come that then MY code is executed? this.onsuccess(event) is already predefined in the "class" and I'm basically overwriting it, aren it?When I write an object and give it, say, this.test = function (item) { console.log(item); }, someone who instantiates that object cant just go: this.test = function (item) { alert("item); }; — user3629892
– user3629892, Commented Oct 13, 2014 at 20:23
Yes they can. Properties are writable by default. If the have a reference to the object, they can do whatever they want with it. — Felix Kling
– Felix Kling, Commented Oct 13, 2014 at 20:35
In my head Im picturing something like the code in my edit, but thats obsiously wrong... how exactly is that implemented? — user3629892
– user3629892, Commented Oct 13, 2014 at 20:54
You'd have to assign to success before open is called. — Felix Kling
– Felix Kling, Commented Oct 13, 2014 at 21:01

fgb · Accepted Answer · 2014-10-13 21:59:20Z

3

To create a similar api, you can do something like:

function open(a, b, c) {
    var request = {};

    if(c > 20) {
        setTimeout(function() {
            if(typeof request.success === "function") {
                request.success("String");
            }
        }, 1);
    }

    return request;
}

var myrequest = open(4, 2, 21);
myrequest.success = function(ev) {
    console.log(ev);
};

Here, setTimeout is asynchronous so the callback function is not executed immediately. When any asynchronous task is run in JavaScript, the currently executing code will run to completion before any callback is called. So success is guaranteed to be set before request.success called.

The Indexed DB open call similarly runs an asynchronous task, and then dispatches events when it is finished which will eventually call your callback function.

answered Oct 13, 2014 at 21:59

fgb

18.6k3 gold badges41 silver badges52 bronze badges

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

1 Comment

user3629892 Over a year ago

very nice! thanx a lot!!

Zav · Accepted Answer · 2014-10-11 19:12:16Z

0

I overwriting the default function of the IDBRequest-class

Looks like there is no default behavior, so you just set up your own func.

answered Oct 11, 2014 at 19:12

Zav

6613 silver badges8 bronze badges

Collectives™ on Stack Overflow

Understanding event handling and callbacks in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related