Creating your own JavaScript Library – part 2 – Event Handling

write-your-own-javascript-libraryIn Part 1 of Creating your own JavaScript library, we cover the library essentials: library design, creating a solid object constructor, and adding functions by extending the object prototype. This post focuses on extending our basic library with event handling.

Out of the box event handling can be accessed  through Javascript and DOM apis, shown in the first 3 examples:

Simple event handling:

Assigning functions to events this way can be problematic, as only one function can be assigned at any given time. Mozilla Developer Network recommends that the addEventListener method be used instead, because of its flexibility.

Better Event handling

The addEventListener method accepts three parameters:

Assigning an anonymous function:

We can easily wrap this built in functionality with our library by creating a click function with a parameter that is passed to this native DOM event. This parameter will be an anonymous function (like the previous example) that will then bound to the element’s handler.

Handler wrapped by our library:

This pattern can be applied to any event natively exposed, such as:

  • onclick
  • onmouseover
  • blur
  • keydown

Non-standard or browser specific events

In the case where one browsers event api differs, it is simple to account for this in our event handler:

Optimizing our code

Instead of duplicating the addEventListener code in each event wrapper, we can optimize by creating an internal addListener(event, callback) function which will be called by other exposed functions, such as click, onMouseOver, etc

This separates the public wrapper from the internal event binding, allowing us to easily modify or expand the actual event binding code without modifying it in numerous places


Tutorial: Pass data between pages in

You have created the perfect webpage. Beautifully formed HTML, poetic CSS, artistic JavaScript, and cunning jQuery. And suddenly — a link — and all user data is lost!

By far, the simplest way to pass data between pages is by using URL variables. These little nuggets act quite a bit like two pages playing catch:

  • the first page throws some variables along with the URL
  • the second page must catch them

the throw

Get the data, save it as a string like this:

then send the data to a page like this

Thats it!

And now for a little explanation of part one:

the “?” after the url means “hey server, get ready… Im about to pass you some data.”

“name=” this is what im going to be passing you.

and “strName”… Here’s the data!

It’s pretty simple to pass multiple values too: just put an & symbol between variables, like this:

Be sure to put this inside of some sort of event in the code behind, like a button or linkbutton click.

the catch

This part is almost as simple to implement as the throw. The basic steps are:

  • get the variable from the url, if it is there
  • the store it, or use it right then

As your page is loading, your want to let the server know that you are expecting some data, and store it if there.

this is done by using:

Then you are free to do any ifs, fors, dos, or other whathaveyous on your string that you would like.

For example: Im expecting a username, but since i didn’t get one, send them back home: