JavaScript Events: Look inside JavaScript Framework Library

Programming and coding JavaScript applications, web applications are becoming easier, with the strong support from powerful JavaScript frameworks such as jQuery, MooTools. However, within the scope of this free JavaScript article tutorial, the author only discusses the events in JavaScript, through some definition: JavaScript mouse events, Adding Events - Easy with JavaScript frameworks, Events without the JavaScript Framework, JavaScript button events, jQuery events, Select the Element for Clicking, Events in Firefox/Safari/Opera/Chrome/Internet Explorer and so on, ... Please go to the full post page for more details.

Check more JavaScript events article tutorials for better coding tips:
- How to Build Custom events in JavaScript
- Top 10 JavaScript Frameworks by Google, Yahoo, Bing

Sampled by ©

Javascript is becoming much more accessible thanks to libraries such as jQuery & Mootools. In this article, hopefully to form part of a new series, we are going to take a look behind the libraries - not looking at the code of the libraries but revealing how much easier they make our lives.

Adding Events - Easy with Libraries!

Today we're going to be looking at adding events. With jQuery, it's as simple as:

1$('#header').click(function() {...});

However with normal javascript it's not so nice. As you might expect, Firefox, Safari, Chrome, Opera and similar use one set (the correct, I might add) way of doing it, whereas Internet Explorer (all of them!) use a different code. That means for each event we add, we need to write the code twice. No worries though. I'm going to show you both sets of code and then we'll create our own function to abstract the code away and let us write one set of code which will work with every browser.

Events without the Library

Firstly, we'll set up just a simple function which we will run when an element is clicked.

1function doSomething()
2 {
3 alert('you clicked me!');
4 }

And an element for us to select:

1<h1 id="header">This is what we'll be clicking on!</h1>

Select the Element for Clicking!

So our first step (and this works in all browsers, thankfully!)  we will just select the header element:

1var h1 = document.getElementById('header');

Firefox, Safari, Opera, Chrome and so on.

So this is the code that all popular, modern day browsers use. It's incredibly straight forward and is called addEventListener():

1h1.addEventListener('click', doSomething, false);

The function takes 3 arguments. The first is the event - when you want the function to be run. We've used click, but there are countless others. The second is the function itself - we created this function earlier. Note that because we are passing the function through as an argument we don't need to add brackets. The third is to do with javascript bubbling and when the event is fired. This is something which is a bit too complex right now, but we'll cover it in the future!

Internet Explorer

IE's code is pretty similar - oh Microsoft, why not just use the same as everyone else?

1h1.attachEvent('onclick', doSomething);

This only takes two arguments, the event and the function to execute. Whereas with most browsers you would use 'click', this time it's 'onclick'. Simply put, add 'on' to any event.

If you run the respective code in the relevant browser, it will work. If you use the wrong code, check, and it wont work.

Our own Version.

So, this is a pain right? What we are going to do now is create our own function which will allow us to only write the addEvent code once, not twice. I'll show you all the code and using the comments you should be able to see most of what is going on:

01function addEvent(elem, evt, func, cap)
02 {
04 if(elem.attachEvent)
05 {
06 //if this evaluates to true, we are working with IE so we use IE's code.
07 elem.attachEvent('on'+evt, func);
08 } else {
09 //the statement has evaluated to false, so we are not in IE/
10 //the capture argument is optional. If it's left out, we set it to false:
11 if(!cap) cap = false;
12 //and use the normal code to add our event.
13 elem.addEventListener(evt, func, cap);
14 }
15 }

And the usage of this is straight forward:

1addEvent(h1, 'click', doSomething, false);

And We are Done

I hope you enjoyed this, it's always good to step back from the library and write some of our own functions.

Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future

Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes

Free JavaScript Tutorials & Articles