Programmation et le codage des applications JavaScript, les applications Web sont de plus en plus facile, avec le ferme appui de puissants frameworks JavaScript comme jQuery, MooTools Toutefois, dans le cadre de cette Free Article JavaScript tutorial, L'auteur ne traite que les
Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer
iPage, seulement avec
$1.89/month, inclus
$500+ Crédits supplémentaires gratuites pour le paiement de
24 mois ($45)?
Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque
vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer
un plein remboursement. C'est génial! Vous devriez
essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur
iPage.
Essayez iPage GRATUIT première année MOMENT
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.
3 | alert( 'you clicked me!' ); |
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:
1 | var 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():
1 | h1.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?
1 | h1.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:
01 | function addEvent(elem, evt, func, cap) |
07 | elem.attachEvent( 'on' +evt, func); |
13 | elem.addEventListener(evt, func, cap); |
And the usage of this is straight forward:
1 | addEvent(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.
Réponse