JQuery & AJAX Event Handling

Here I’ll walk you through a lot of code to explain how you can use Event Handler’s with JQuery and AJAX. To start you off here are all the JQuery Event Handlers and Event Object Properties:

JQuery Event Handler’s


  • blur() : Triggered when you leave an element
  • change() : Triggered when an element is changed
  • click() : Triggered when you click an element
  • dblclick() : Triggered when you double click an element
  • error() : Triggered when an error occurs
  • focus() : Triggered when you enter an element
  • keydown() : Triggered when a key is pressed down
  • keypress() : Triggered when a key is pressed an released
  • keyup() : Triggered when a key is released
  • load() : Triggered when your page loads
  • mousedown() : Triggered when the mouse button is pressed down
  • mouseup() :Triggered when the mouse button is released
  • mousemove() : Triggered when the cursor moves
  • mouseover() : Triggered when the mouse goes over an element
  • mouseout() : Triggered when the mouse moves off an element
  • submit() : Triggered when the submit button is pressed

Event Object Properties

  • event.altKey : Has value true if Alt key was pressed
  • event.ctrlKey : Has value true if Ctrl key was pressed
  • event.data : Contains value passed to bind() function
  • event.keyCode : Contains the keycode for the last pressed key
  • event.pageX : Returns the mouse coordinates on the X access
  • event.pageY : Returns the mouse coordinates on the Y access
  • event.screenX : Returns the mouse coordinates on the X access, relative to the page
  • event.screenY : Returns the mouse coordinates on the Y access, relative to the page
  • event.shiftKey : Has value true if Shift key was pressed
  • event.target : Element’s name that issued an event
  • event.timeStamp : Contains timestamp, that lists when the event occurred
  • event.type : The type of event that occurred

On with the Code

Here I provide real working code, you can use to truly understand how to use event handler’s. I will list the code and then describe what it is doing in a blue box that follows.

<html>
<head>
<title>JQuery Example</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

Here I am opening up the HTML file and calling for the JQuery library.

<script type=”text/javascript”>
window.onload = function() {

$(‘#oneButton’).bind(‘click’,alertButtonClick);

This code will attach all of my event handler’s as soon as the page loads. I describe window.onload in my previous JQuery / AJAX Tutorial.

I am using the function bind to attach an on click event handler. If someone click’s on the element named “onebutton”, the function alertButtonClick() will be called. Here is the button HTML code:

<button type=”button” id=”oneButton”>Alert on Click</button>

$(‘#textBox1’).bind(‘blur’,onBlurEvent)
.bind(‘focus’,onFocusEvent)
.bind(‘onmousedown’,onMDownEvent)
.bind(‘onmouseup’,onMUpEvent)
.bind(‘change’,onChangeEvent);

Here I show you how to attach more than one event handler at one time. Just follow one call to the bind() function after another. I’m attaching a blur, focus, onmousedown, onmouseup, and a change event handler; to the HTML text box named “textBox1”. This is what it’s HTML code looks like:

<input type=’text’ id=”textBox1″ size=40>

$(window).resize(resizedWindow);

Here I show you how to call a function, in this case resizedWindow(), when the browser window is resized.

$(‘#twoButton’).bind(‘dblclick’, dblClickedMe);
$(‘#logo’).bind(‘mouseover’, mouseOverMe).bind(‘mouseout’, mouseOutMe);

Again, I attach a double click event handler to a button, and a mouse over and mouse out handler to an image.

$(“form”).submit(function() { alert(“Submit button clicked”) });

This is how you call a function, when the submit button is pressed. Also I show here, how you can embed a function to directly handle an event handler. It’s up to you which way you’d like to call your function’s?

$(‘#threeButton’).bind(‘click’,unbindLogo);

$(‘#theBody’).bind(‘keyup’,checkKeyPressed);
};

Here I end the function’s associated with the window.onload event handler call. Make sure you end this code block with not only a closing curly brace }, but also a semi-colon (;).

I also bind a click event to another button and a keyboard key press to the body of the web page. Special note: make sure you assign an identification number to the body tag to do this. This is what the body tag looks like:

<body id=”theBody”>

function alertButtonClick() {
alert(“There was a button clicked”);
}

function onBlurEvent()
{
$(“#second”).html(“You left the text box”);
}

Here I define two function’s that will handle alerting you that an event handler has been triggered.

The function alertButtonClick(), will open an alert pop up, when the button is clicked.

The function onBlurEvent(), will write new text into the paragraph element named “second”, when the user leaves a text box.

I reuse this last function over and over again for many of the event handler’s to come. Because of that I’ll list the code, but won’t describe it until something new comes up.

function onFocusEvent()
{
$(“#second”).html(“You entered the text box”);
}

function onMDownEvent()
{
$(“#second”).html(“You left the text box”);
}

function onMUpEvent()
{
$(“#second”).html(“You entered the text box”);
}

function onChangeEvent()
{
$(“#third”).html(“You changed the text box”);
}

function resizedWindow()
{
$(“#second”).html(“Window was resized”);
}

function dblClickedMe()
{
$(“#second”).html(“You only have to click once”);
}

function mouseOverMe()
{
$(“#second”).html(“You put your cursor on my logo”);
}

function mouseOutMe()
{
$(“#second”).html(“You left my logo”);

Ok, we are back into the new code. I’ll describe now what the following function’s do.

function unbindLogo()
{
$(‘#logo’).unbind(‘mouseover’, mouseOverMe).unbind(‘mouseout’, mouseOutMe);
}

function checkKeyPressed(event)
{
$(‘#fifth’).text(String.fromCharCode(event.keyCode));
}

</script>

Just as you can bind an event to an HTML element, you can also unbind and event handler. In the function unbindLogo(), I do just that. Now the events assigned to that element, will no longer be triggered.

In the function checkKeyPressed(), I pass it the event object, that I use to get the keycode associated with the last key pressed. I then convert it into a character I can display on the web page with the function String.fromCharCode().

The rest of the code is pure HTML, so I don’t think I need to describe it to you. I hope you enjoyed learning about Event Handler’s in JQuery and AJAX. If you have any question’s leave them below.

I leave you with the rest of the HTML:

</head>

<body id=”theBody”>
<div><h3>Playing with Event Handlers</h3></div>

<div>
<img src=’http://www.newthinktank.com/favicon.png’ id=’logo’ alt=’Little Brain’ />
</div>
<br />

<div>
<p><strong>Events Triggered on the Page:</strong></p>
<p id=”second”>Waiting for Event</p>
<p id=”third”>Waiting for Change</p>
</div><br />

<div>
<p><strong>Key Events Triggered on the Page:</strong></p>
<span id=”fourth”>Key Pressed:</span>
<span id=”fifth”>Waiting for Change</span>
<br />
</div><br />

<form action=””>
<button type=”button” id=”oneButton”>Alert on Click</button>
<button type=”button” id=”twoButton”>Click on me Twice</button>
<button type=”button” id=”threeButton”>Unbind the Logo</button>
<input type=’text’ id=”textBox1″ size=40>
<input type=’submit’ value=’Send’>
</form>

</body>
</html>

Here to Serve

Think Tank

3 Responses to “JQuery & AJAX Event Handling”

  1. NICO says:

    I like what you’re doing…
    Thank you for that.

    The effects in your videos are pretty nice.

    Only thing you could change is that – if you provide code for free – to let it really download from somewhere (if you already do, I did not find it… maybe a link or downloadbutton would help.)

    Because copy and paste will do a lot of problems, since f.e. the ” are causing trouble…

Leave a Reply

Your email address will not be published.

Google+