
<?php
// Include the config file first
include_once("../includes/config.inc.php");

// Set the page variables
$page_title = "Event-Handlers";
$page_description = "The basics to using event handlers in JavaScript";
$page_author = "Alan Haddon";

// Then include the header (it will use the page variables above)
include_once("../includes/header.inc.php");
?>
	    <main role="main" class="container">

	    	<!-- Beginning of blog post -->
	    	<div class="blog-post">
	    		<h2 class="blog-post-title">Event Handlers</h2>
	    	  	<p class="blog-post-meta">Sept 17, 2020 by Alan Haddon</p>

	    	  	<p>The basics to using event handlers in JavaScript</p>
	    	  	<hr>
	    	  	<h3>Getting Started</h3>
	    	  	<p>
				  	In JavaScript event handling is used to make a webpage respond to user interaction.  For example, when a user clicks on a link to go to another page, 
                    that is an event handler for whenever the user clicks the mouse on that location of the webpage.  Another example would be making some text change color 
                    or size whenever the mouse cursor is moved over it.  “Event handlers can be used to handle, and verify, user input, user actions, and browser actions: Things 
                    that should be done every time a page loads, things that should be done when the page is closed, action that should be performed when a user clicks a button, 
					content that should be verified when a user inputs data, and more ...” (<i>JavaScript Events</i>). In this example, we are going to create a button and use an 
					event handler to display a message in the DOM by using the addEventListener method.
	    	  	</p>
	    	  
	    	  	<p>
					-First thing we need to do is create a button and assign it an id attribute. (note: it doesnt have to be a button, it can be any object created in the DOM)
	    	  	</p>
	    	  	<pre class="language-html"><code>
&lt;button id="exampleButton"&gt;Click Here!&lt;/button&gt;
			  	</code></pre>
				<p>
                	-Next we create the location that we want the message to be displayed. Notice that nothing is inputted between the opening and closing p tags, but we are assigning 
					it an id so that we can change the inner HTML through JavaScript. 
				</p>
				<pre class="language-html"><code>
&lt;button id="exampleButton"&gt;Click Here!&lt;/button&gt;
&lt;p id="btnMessage"&gt;&lt;/p&gt;
			  	</code></pre>	  
			    <h3>Now for the JavaScript</h3>
	    	  	<p>
					-Now in our JavaScript we need to get a handle on both the button and p elements using the getElementById method and assigning each of them to a variable
	    	  	</p>
				<pre class="language-js"><code>
//Getting a handle on the button					
var exampleButton = document.getElementById("exampleButton");
//Getting a handle on the p element that will display our message
var btnMessage = document.getElementById("btnMessage");
			  	</code></pre>
				<p>
					-Next we create a function that we want to be called when then button is clicked.  This function is going to be very basic, but when it is called 
					it will change the inner HTML of our p elements to display "You Clicked Me!!!"
                </p>
				<pre class="language-js"><code>					
var exampleButton = document.getElementById("exampleButton");
var btnMessage = document.getElementById("btnMessage");

//This is our function...
function message(){
	    btnMessage.innerHTML = "You Clicked Me!!!";
    }
			  	</code></pre>
				<p>
					-Now we assign the addEventListener method to the button in order to invoke the message function.  This is done by passing two parameters into 
					the addEventListener method.  The first being the event that is being listened for, and the second being what happens when that event occurs.  So, 
					in this example, when a user clicks on the button, our message function is invoked.   
                </p>
				<pre class="language-js"><code>					
var exampleButton = document.getElementById("exampleButton");
var btnMessage = document.getElementById("btnMessage");

//This is the event handler for our button
//Notice the parameters
exampleButton.addEventListener("click", message);

function message(){
	    btnMessage.innerHTML = "You Clicked Me!!!";
    }
				</code></pre>
				<p>
                    And there you have it! When a user clicks on the button the message is displayed where the p tag is located.  Try this code for yourself to see it in action and 
                    for more great examples check out <a href="https://www.w3schools.com/js/js_events.asp">www.w3schools.com</a> where you can see more examples of all the different event handlers that are 
                    out there.
				</p>
				<br>
				<br>
				<p><i>References:</i></p>
				<p><i>“JavaScript Events .” JavaScript Events, www.w3schools.com/js/js_events.asp.</i></p>  
			</div>
	    	<!-- End of blog post -->

	    </main>

<?php
include_once("../includes/footer.inc.php");
?>
