JQuery Video Tutorial Pt 3

JQuery Event HandlingIn this JQuery Video Tutorial I will cover numerous topics with a focus on Event Handling. If you missed part 1 check it out first JQuery Video Tutorial.

I’ll show you below how to:

  • Bind Events to an Element in a Web Page
  • Change Content Dynamically Based off of Events being Triggered
  • Track Mouse Movements
  • Monitor Keyboard Presses
  • Track Every Event with 1 Function

And, a bunch more!

All of the code follows the video. I also listed all of the JQuery Event Handlers and JQuery Event Object Properties below.

Leave any questions or comments below.

JQuery Event Handlers

  • 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

JQuery 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

Code From the Video



<title>JQuery Event Handlers</title>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>


<script type=”text/javascript”>

$(“document”).ready(function() {












$(‘#twoButton’).bind(‘dblclick’, dblClickedMe);

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


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




$(‘#theBody’).bind(‘keyup’,checkKeyPressed).bind(‘mousemove’,theMouseMoved).click(event, eventTriggered);




function alertButtonClick() {

alert(“There was a button clicked”);



function onBlurEvent()


$(“#second”).html(“You left the text box”);



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 W: ” + $(window).width() + ” H: ” + $(window).height());



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”);



function unbindLogo()


$(‘#logo’).unbind(‘mouseover’, mouseOverMe).unbind(‘mouseout’, mouseOutMe);



function checkKeyPressed(event)





function theMouseMoved(event)






function eventTriggered(event)










<body id=”theBody”>

<div><h3>JQuery Event Handlers</h3></div>




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


<br />



<p><strong>Events Triggered on the Page:</strong></p>

<p id=”second”>Waiting for Event</p>

<p id=”third”>Waiting for Change</p>




<p><strong>Key Events Triggered on the Page:</strong></p>

<span id=”fourth”>Key Pressed:</span>

<span id=”fifth”>Waiting for Change</span>

</div><br />



<p><strong>Mouse Movements on the Page:</strong></p>

<span id=”sixth”>Mouse X Coordinate:</span>

<span id=”seventh”>Waiting for Change</span><br />

<span id=”eighth”>Mouse Y Coordinate:</span>

<span id=”ninth”>Waiting for Change</span><br />

<span>Textbox Changed: </span>

<span id=”tenth”>Waiting for Event</span><br />

<span>Element Changed When: </span>

<span id=”eleventh”>Event Occurred When</span>

</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’>








15 Responses to “JQuery Video Tutorial Pt 3”

  1. warren says:

    I’m not noob on JQuery but watching your
    video tutorial is relaxing.

    Anyway thanks for your effort

  2. Simon says:

    instead of
    $(‘#textbox1’).bind(‘blur’, onBlurEvent)
    could you not just put

  3. Amit says:


    when I do this, it works fine!
    $(function (){
    $(‘#oneButton’).bind(‘click’, alertButtonClick);

    function alertButtonClick(){
    alert (‘There was a button clicked’)

    but when I add this ‘()’ after alertButtonClick, it alerts when page load. I don’t know why this happens.

    $(function (){
    $(‘#oneButton’).bind(‘click’, alertButtonClick());
    function alertButtonClick(){
    alert (‘There was a button clicked’)

    can you please help?

  4. hdenis says:

    It doen’t work on firefox 9.0.1 :
    Error : event is not defined on the line


  5. elad yanai says:

    do you have any idea why when i copy this code to notepad++ it doesnt recognize the single column..

    i tried adding this code to my site:

    $(function() {


    function onFocus()
    $(“#searchsubmit”).css(“display”, “block”)
    function onBlur()
    $(“#searchsubmit”).css(“display”, “none”)

    to make a focus event on the search bar display none the search button though it doesnt seeam to work – do you have any idea why?

    • admin says:

      You need to define an event type in bind and then provide the function to call. For example $(‘#oneButton’).bind(‘click’,alertButtonClick); I define when a click event occurs on the button with the id = oneButton that the function named alertButtonClick should execute

      You are not providing that even above.

  6. Adib Mosharrof says:

    Its a really nice video. There is a small error at the end of the source code, it says size=40, since this is a css property, it should be size:40. Please fix this, or correct me if i am wrong. Thank you

    • admin says:

      Thank you. I’m sorry if I caused any confusion, but the size attribute is referencing the size of the input box. In that situation it makes sense to use size=40. I hope I’m seeing the part that you are referencing. Thanks

  7. INDRAJIT KHAN says:

    Please discuss more about fancy-box. I need more video about fancy-box. i.e. input-able fancy box.

  8. Jorge Mendes says:

    They are called the X and Y axis and not access 🙂
    Other than that, your tutorials are great

Leave a Reply

Your email address will not be published.