The jQuery event handling methods are core
functions in jQuery.
Event
handlers are method that are called when "something happens" in HTML.
We term it as "triggered (or "fired") by an event".
It
is a common practice to put jQuery code into event handler methods in the
<head> section as the code in the head section is available for
the complete document as compared to the body section as code in body section
will be available only for the elements after that point of code
:
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
In
the example above, a function is called when the click event for the button is
triggered Means when the User will Click on the Button:
$("button").click(function()
{..some code... } )
The
method hides all <p> elements:
$("p").hide();
Functions In a Separate File
As
we have already discussed that we can put the jQuery functions in
a separate file too with extension ".js". Let me explain this by a scenario suppose our website contains a lot many pages, and as other languages here with our jQuery we want functions to be easy to maintain and reused, then we should
put our jQuery functions in a separate .js file.
When
we use jQuery here, the functions are added directly into the <head>
section, However, sometimes it is preferable to place them in a separate file,
like this (remember our other css and java script files with the src
attribute):
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
Before moving further with event here I would like to discuss a little about Name Confilcts
jQuery Name Conflicts
jQuery
uses the $ sign as a shortcut for jQuery.
Some
other JavaScript libraries also use the dollar sign for their functions.
The
jQuery noConflict() method specifies a custom name (like jq), instead of using
the dollar sign.
Example
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
var
jq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
</head>
<body>
<h2>This
is a heading</h2>
<p>This
is a paragraph.</p>
<p>This
is another paragraph.</p>
<button>Click
me</button>
</body>
</html>
In Next article I will Discuss more Events Stay tuned.
