jQuery Event Handlers

Handle events in jQuery - tutorial by EasyProgramming.net

by Nazmus Nasir

HTML

<!-- Easy jQuery - Basic jQuery Events - #3 -->
<p>
Welcome to the third Easy jQuery Tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, we'll learn about Events in jQuery. We'll focus on just a couple, you can get more information on jQuery.com. For more information on event handlers, check out <a href="https://www.easyprogramming.net/javascript/js_onclick_event_handler.php">EP: Event Handlers</a> and for event listeners, check out <a href="https://www.easyprogramming.net/javascript/js_intro_to_event_listeners.php">EP: Event Listeners</a></p>
<p>
We'll go into event listeners next. All of the events listed below and all found on the jQuery website are basic JavaScript events. If you know about JavaScript events, then jQuery events will be extremely easy!
</p>
<p>
You can read more aobut the events below at <a href="http://api.jquery.com/category/events/">jQuery.com</a>
</p>
<p>
Some event handlers: 
</p>

<table>
<thead>
  <th>Name</th>
  <th>Description</th>
</thead>
<tbody>
  <tr>
    <td>.blur()</td>
    <td>Leaving a form element</td>
  </tr>
  <tr>
    <td>.click()</td>
    <td>Clicking on an element</td>
  </tr>
  <tr>
    <td>.ready()</td>
    <td>When an element has been loaded, used often on the whole document itself</td>
  </tr>
  <tr>
    <td>.keydown()/.keypress()/.keyup()</td>
    <td>Events binded to keyboard events down, press, and up</td>
  </tr>
  <tr>
    <td>.hover()</td>
    <td>mouse event hover over an element</td>
  </tr>
  <tr>
    <td>.focus()</td>
    <td>when element is focused</td>
  </tr>
</tbody>
</table>

<h2>
Let's practice:
</h2>
<button id="btn">
Click me
</button>
<br /><br /><br />
Name: <input type="text" id="inp"/>
<br />
<span id="result"></span>
<br />
<span id="result2"></span>

<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS

td, th {
  padding: 10px;
  border-bottom: solid #000 1px;
}

JavaScript

$('#btn').click(btnClick);

$('#inp').keyup(function(){
	$('#result').text($('#inp').val());
});

$('#inp').keydown(function(){
	$('#result2').text($('#inp').val());
});

$('#inp').focus(function(){
	$('#btn').text('FOCUSED');
});

$('#inp').blur(function(){
	$('#btn').text('Click Me');
});

$('#btn').hover(function(){
	$('#btn').text('HOVERING');
});











function btnClick(){
	alert('Button has been clicked');
}