|
Developer Geek Resources JQuery - Creating an Event Handler |
Custom Search
|
|
Developer Geek Resources JQuery - Creating an Event Handler |
Custom Search
|
Browser incompatibilities still exist today just as they did back in the days when Netscape and IE ruled the roost. Netscape is long gone, but at a minimum a web developer on the internet needs to contend at a minimum with Internet Explorer and Mozilla Firefox to cover the PC world. They are also wise if they code their apps to run in Opera and Chrome as well. Let us not forget the Mac and their browser, Safari. And in the Linux space you will want to support Konqueror. Oh, and there are now iPhones, Blackberries, and other Android mobile devices one should also consider. Actually creating cross-browser compatible sites and apps is far more compelling than it was back in the day.
As I have no hair left to pull out my goal is to cover this subject in way that will help you guarantee to a higher degree of certainty for cross-browser compatibility. Sorry, in this world apart from rigerous testing there are no implicit guarantees. The following table specifies the minimum browser version, and there are no guarantees as well that future versions will maintain this compatibility.
| EVENT | IE 7 | Firefox 3.0 | Safari 3.0 | Chrome 1.0 | Opera 9.62 | Konqueror 3.57 | iPhone 3G |
| Click | y | y | y | y | y | y | y |
| Key up | y | y | y | y | y | y | y |
| Mouse Down | y | y | y | y | y | y | y |
| Mouse Up | y | y | y | y | y | y | y |
| Reset | y | y | y | y | y | y | y |
| Submit | y | y | y | y | y | y | y |
| Key down | y | y | y | y | y | y | |
| Mouse move | y | y | y | y | y | y | |
| Mouse out | y | y | y | y | y | y | |
| Mouse over | y | y | y | y | y | y | |
| Double click | y | y | y | y | y | y | |
| Resize | y | y | y | y | y | y | |
| Select [1] | y | y | y | y | y | y |
[1] Dealing only with the textarea form element.
By now you have perused the matrix and have an idea what cross-broswer events are doable. We can not take a look at the code that is involved in creating and using an event handler. You should be pleasantly surprised that it does not take much.
Typically I like to implement toy code that can be morphed quickly into something practical. In this case I think just presenting the code to implement an event handler by itself is worth its weight in gold. (I, suspect the concept of echoing data to the web could have some very practical application, just not to the masses).
<form><input type="button" id="btnShowMe" value="Run" /></form> <div id="htmlconsole"></div>
Starting off with the html markup... I have an empty div tag that will be the container we echo our data to. Next, looking at the img tag markup you may be wondering where the onclick code is. It is actually coded in the the JQuery script.
<script type="text/javascript">
$(function() {
var num = 0;
$('#btnShowMe')[0].onclick = function(event) {
num = num + 1;
echo('Dude number' + num);
}
function echo(text) {
$('#htmlconsole').append(text + "<br/>");
}
});
</script>
Wrapped within the generic jquery function $(function) { }); we find our onclick handler. We reference our trigger to the image we are using as the button (btnShowMe). We tie this as an indice to the onclick event in the left operand. On the other side is our even function. It contains a simple number we increment and then assign into the argument of our function named echo(). Echo is little more than a one liner jquery function that appends our text and break to our div tag (htmlconsole).
It should also be noted that the onclick event handler we have implemented is specific to our our one ui button (actually an image pretending to be an button). We can implement as many onclick handlers as we want which certainly comes in handy if we have multiple forms and/or buttons on our page.
If you find this site useful and are a book buyer/reader...Abe Books is one of my affiliates. I only use affiliates that I also purchase products from. I love Abe books. I have purchased many books from them originally cost $40 to $60 for as little as $5 to $10 dollars including shipping costs. By accessing Abe books and clicking on one of my links I receive a small commission on your purchase that helps pay for this site. You pay no more for your books than if you accessed their site directly. Thanks for your support. Click on icon to find books on JQuery at Abe Books... |
|||
|
|||
|
I find JQuery in Action to be an indespensible book for your collection. If you would like a new version of the book click below to buy it from Amazon (also one of my affiliates).
|
|||
