Soft Technology Classroom: jQuery Event Functions

jQuery Event Functions

jQuery jQuery event handler method is the core function.

Event handler method means that when certain events occur in the HTML call. Term by an event "trigger" (or "excitation") is often used.

Will usually event processing method jQuery code into <head> section of:

Examples

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

</html>

In the above example, when the button click event is triggered calls a function:

$("button").click(function() {..some code... } )

This method hides all <p> elements:

$("p").hide();

Separate file function

If your site contains many pages, and you want your jQuery functions easy to maintain, so please put your jQuery functions into a separate .js file.

When we demonstrate jQuery in the tutorial, the function will be added directly to the <head> section. However, put them in a separate file will be better, like this (to refer to the file by the src attribute):

Examples

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery Name Conflicts

Introduction to jQuery using the $ symbol as jQuery way.

Some other JavaScript library functions (such as Prototype) also use the $ symbol.

jQuery using a method called noConflict () to resolve the problem.

var jq = jQuery.noConflict (), to help you use your own name (such as jq) instead of the $ symbol.

in conclusion

Since jQuery is specially designed to handle HTML event, then when you follow these guidelines, your code will be more appropriate and easier to maintain:

All the jQuery code in the event handler
All event handlers into the document ready event handler
The jQuery code placed in a separate file .js
If there is a name conflict, rename the jQuery library

jQuery Events

Here are some examples in jQuery event method:

Event function	Binding function to
$(document).ready(function)	Will function to bind to the document ready event (when the document is finished loading)
$(selector).click(function)	Trigger or bind a function to the selected element click event
$(selector).dblclick(function)	Trigger or bind to double-click event function of the selected element
$(selector).focus(function)	Trigger or bind a function to get the focus event of the selected element
$(selector).mouseover(function)	Trigger or bind a function to the selected elements mouseover events