Edit in JSFiddle

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

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

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

$('#inp').on('blur', function(){
	console.log($('#inp').val());
  $('#btn').off();
});

function btnClick(){
	alert("Button has been clicked");
}
<!-- Easy jQuery - jQuery .on() event method - #4 -->
<p>
Welcome to the fourth Easy jQuery Tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, we'll learn about the .on() event method in jQuery. It's newer and more powerful than the previous event methods that we looked at. These are similar to event listeners that we covered in JavaScript. For more information on 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>
The .on() event method looks something like <code>$(selector).on('event', 'delegatedSelector', 'data', callback);</code>. 
</p>
<p>
The selector in this case is targetting a child of the current selector, and is optional. If left out, only the parent will have the event registered. The data is special data that you can send back in JSON format, and is also optional. 
</p>
<p>
.on() examples:
</p>
<table>
<thead>
  <th>Name</th>
  <th>Description</th>
</thead>
<tbody>
  <tr>
    <td>.on('blur', callback);</td>
    <td>Leaving a form element</td>
  </tr>
  <tr>
    <td>.on('click', callback);</td>
    <td>Clicking on an element</td>
  </tr>
  <tr>
    <td>.on('keydown', callback);</td>
    <td>Events binded to keyboard events down. Can also be applied to keypress and keyup.</td>
  </tr>
  <tr>
    <td>.on('hover', callback);</td>
    <td>mouse event hover over an element</td>
  </tr>
  <tr>
    <td>.on('focus', callback);</td>
    <td>when element is focused</td>
  </tr>
  <tr>
    <td>.off();</td>
    <td>Remove all event handlers from selector!</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 />
<p id="paragraph">
<span id="result"></span>
<br />
<span id="result2"></span>
</p>
<br /><br /><br /><br /><br /><br />
td, th {
  padding: 10px;
  border-bottom: solid #000 1px;
}