JavaScript: Attach Generic Event Handler

Michael Griffiths
8y
5.6k
0
2

Article

JavaScript is an event driven language and it is wonderful. However it is plagued by a problem that server side languages are not. The JavaScript ‘standard’ is not very standard at all. The problem is that it is down to the developers of the web browsers to implement the JavaScript standard in the same way. Easy right? No, unfortunately the real world and an ideal world are two completely separate beasts.

In JavaScript a very common requirement is to be able to use addEventListener and as time goes on this task is becoming less and less hassle. However if you require your site to support older versions of that pesky Internet Explorer you need use attachEvent. What a Hassle!

As I’m sure you know there a seemingly endless number of JavaScript Libraries out there that take the pain out of attaching events in JavaScript. However, as awesome as these libraries are, sometimes you don’t require all of the extra features that come packed in with them.

There are times when all you want to do is to add event listener but it’s such a pain in the you know what writing code every time that checks for addEventListener / attachEvent and use accordingly soI decided it would be a good idea to create a handler for this specific task that can be reused and therefore make life a little easier without the overheads of an entire JavaScript library.

First I will share with you the handler then I will show you how to utilise it in your code.

First you need to create a new JavaScript file. So in visual studio go to File > New > File (or ctrl + shift + N) and select JavaScript file from the list.

Then in that JavaScript file add the following code:

window.addingEvent = function(event, target, method)
{
if (target.addEventListener)
{
target.addEventListener(event, method, false);
} else if (target.attachEvent)
{
target.attachEvent("on" + event, method);
}
}

Our function that we have created takes three parameters; a string of the event, the target element and the function to execute. We check which function exists in the web browser and it also adds the ‘on’ to the start of the event for Internet Explorer.

Make sure you save your file, I called mine handler.js but you can call yours whatever you wish.

Now we are going to test the function.

First you need to create a html page. If you are using visual studio you can create an html page by going to File > New > File (or ctrl + shift + n). As with JavaScript files you can use a text editor such as notepad. If you go with this option then create a new file and add the following markup:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Testing Handler.js</title>
</head>
<body>
</body>
</html>

Note: When using visual studio it adds that very same mark-up on page creation.

Now between your body tags add the following mark-up:

<div id="buttondiv">
<button id="btnTest" name="testButton">Click me!</button>
</div>

Then after your title tags, in the head tags add the following css in a set of style tags:

<style type="text/css">
#buttondiv
{
text-align: center;
}
#btnTest
{
margin: 0 auto;
width: 50%;
}
</style>

These styles are just to make the button nice and big and in the centre for demonstration purposes but are nothing to do with want we are trying to achieve.

Now we want to call our function to add the click event to our button. Just before the closing body tag we need to add 2 script tags like the following:

<script type="text/javascript" src="handler.js">
< script type = "text/javascript" >
</script>

The first script tag makes reference to our external JavaScript file in which we created our handler.

Inside the second script tag is where we are going to add our script to test our function.

To start off we need to create a variable to represent our button, like so:

var theEl = document.getElementById("btnTest");

Then we need to call our function, to do that we need to call window.addingEvent(). We need to add the parameters to it, we will be adding an alert on the click event of our button. Your function call should look like the following:

window.addingEvent('click', theEl, function()
{
alert("Hello World");
});

Save your page and try it out. If you followed the steps correctly you should have when you click the button an alert box that reads‘Hello World’.

Thank you for taking the time to read, I hope you found this article helpful and informative.

What do you do when you want to handle such a situation without a framework? I’d love to hear from you about your cross browser issues and resolutions. Any suggestions for improvement?