Griffiths web design based in Royston, Hertfordshire, United Kingdom


JavaScript Generic Attach Event Handler

Author:   Michael Griffiths

Date created:   12 April 2016

[postpic=cap.png class=img-responsive center-block title=Attaching events like a super hero alt=Attaching events like a super hero style=STYLE][/postpic] [l]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 so I 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: [/l] [code]window.addingEvent = function (event, target, method) { if (target.addEventListener) { target.addEventListener(event, method, false); } else if (target.attachEvent) { target.attachEvent("on" + event, method); } } [/code] [l] 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 mark up: [/l] [code] Testing Handler.js [/code] [l][b]Note:[/b] When using visual studio it adds that very same mark-up on page creation. Now between your body tags add the following mark-up: [/l] [code]
[/code] [l]Then after your title tags, in the head tags add the following css in a set of style tags:[/l] [code] [/code] [l] 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: [/l] [code] [/code] [l]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: [/l] [code] var theEl = document.getElementById("btnTest"); [/code] [l] 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: [/l] [code] window.addingEvent('click', theEl, function () { alert("Hello World"); }); [/code] [l] 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? [/l]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.


Please feel free to leave a comment below:

Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page