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

<html>

<head>

<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() {

 

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

 

$(‘#textBox1’).bind(‘blur’,onBlurEvent)

.bind(‘focus’,onFocusEvent)

.bind(‘onmousedown’,onMDownEvent)

.bind(‘onmouseup’,onMUpEvent)

.bind(‘change’,onChangeEvent);

 

$(window).resize(resizedWindow);

 

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

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

 

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

 

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

 

$(‘#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)

{

$(‘#fifth’).text(String.fromCharCode(event.keyCode));

}

 

function theMouseMoved(event)

{

$(“#seventh”).html(event.screenX);

$(“#ninth”).html(event.screenY);

}

 

function eventTriggered(event)

{

$(“#tenth”).text(event.target.nodeName);

$(“#eleventh”).html(event.timeStamp);

}

 

</script>

 

</head>

 

<body id=”theBody”>

<div><h3>JQuery 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>

 

<div>

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

 

<div>

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

</form>

 

</body>

</html>

 

 

 

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
    $(‘#textbox1’).blur(onBlurEvent)
    ?

  3. Amit says:

    Hi

    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

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

  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:

    $(“document”).ready(function(){
    $(function() {
    $(‘#s’).bind(onFocus)
    .bind(onBlur)

    });

    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.

Google+