Hey guys,
You may be thinking, why I am talking about javascript. Well, to be honest, I have started my life as a developer with javascript. After having a little conversation with my friend Jay Moretti couple months ago, about html5, he cleared my mind about what was html5. He wisely said “Marcelo, html5 is javascript!”. Coming from this point, I would say that I can be classified as html developer. Just kidding 
.
Back in time
Five or six years ago I used to set up my event listeners as anonymous functions, as below.
myElement.onclick = function() {
//my click handler
};
Note at the code above, that I have a specific function only for that element, which makes me write too much code and not reusing it in the future.
myElement.onclick = myFunction;
function myFunction(){
//my click handler
}
At this example we can reuse the code into the method, but it’s pretty sketchy, isn’t it?
Okay, let’s go by the beginning, if you look at the first block of code, I’m using a semicolon after the curly braces. At the second block of code, I am not. Why?
At the first block, there was no function call, it was a statement where I’m just saying that the myElement.onclick assigns a function. So, without the semicolon it doesn’t work in some cases.
Nowadays, javascript has another and better way to create event listeners.
//adding event listener
myElement.addEventListener('click', methodName, false);
function methodName(){
//my click handler
}
//removing event listener
myElement.removeEventListener('click', methodName, false);
Here, I have an organized way, but not safe yet, to create my event listeners. I can reuse the methodName() function in the future, which saves me time of development.
You may be asking yourself, -Why isn’t it safe to use?; Simple, our cool friend, internet explorer 8 and older versions don’t understand the addEventListener method.
OMG, Internet Explorer again cracking the web. Calm down, we have three solutions for this cross-browser issue. I’ll explain one by one.
Please, save the web
The internet has generated a lot of headaches for developers, most part of that is because of the Internet Explorer, the browser that doesn’t evolve as much as Chrome and Firefox.
To avoid problems with event handlers on IE, we have three ways to go:
First:
The simple and weak way.
//Internet Explorer 8 and previous versions
myElement.attachEvent('onclick', methodName);
On this way I just set up this other method called attachEvent(); which can be understood by IE8 and previous.
Second:
To create a cross-browse event listener identifier, hummm, looks fun!
function addCrossBrowseEventListener(myElement, myEvent, myFunction) {
if(myElement.addEventListener){
myElement.addEventListener(myEvent, myFunction, false);
return true;
} else {
myElement.attachEvent('on'+myEvent, myFunction);
return true;
}
This bad boy up there should help you with major cross-browse issues, it checks if the addEventListener function exists, if yes, use it, otherwise use attachEvent.
Looks awesome, but, we have a safer and better way to fix the cross-browse issues for these event listeners, the famous jQuery or another JS library.
Download the jQuery from here
jQuery takes care of the whole cross-browse issues that could happen and it’s always up to date. To set your listener up with jQuery is pretty simple and useful.
//adding event listener
$(myElement).live('click', methodName);
function methodName(){
//do something
}
//removing event listener
$(myElement).die('click', methodName);
Thanks to Igor Costa for the jQuery help. Very appreciated, man.
For a complete list of events, check this out
Conclusion
There is still hope at the internet, I know javascript is not even close to a strong typed language, but we can do it better using the obvious and right methods.
I hope you guys have enjoyed, from now on I’ll be posting more about javascript and html5. Stay tunned.
