Bind an Event Handler to the Click Javascript Event, Or Trigger That Event on an Element

Day 19: JQuery Day #3

Events

Mouse Events

.click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.dblclick()

Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

.hover()

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

.mousedown()

Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

.mouseout()

Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

.mouseover()

Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

.mouseup()

Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

.mousemove()

Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

Document Load Events

.load()

Bind an event handler to the “load” JavaScript event.

.ready()

Specify a function to execute when the DOM is fully loaded.

.unload()

Bind an event handler to the “unload” JavaScript event.

Browser Events

.resize()

Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

.scroll()

Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

Form Events

.blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

.change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

.focus()

Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

.select()

Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

.submit()

Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

Keyboard Events

.focusin()

Bind an event handler to the “focusin” event.

.focusout()

Bind an event handler to the “focusout” JavaScript event.

.keydown()

Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

.keypress()

Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

.keyup()

Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

Using events

To use jQuery events, you usually do the following:

Select one or more elements.
Assign an event.
Pass a function to the event.

Tutorial

Create a new HTML5 project. Name it Page19JQEvents.html.

Open the file events_intro.html and copy it into your index file.

Copy the site.css file into your project at the same level as your index.html file.

Add a link to a jQuery library:

<script src="

Add a pair of <script> tags:

<script</script>

Add the $(document).ready(function(){}) between the <script> tags:

$(document).ready(function(){

});

Responding to a double-click

Add the following inside of your .ready function:

$('html').dblclick(function(){

alert('Double-click!');

});

This responds to a double-click anywhere on the HTML element.

Responding to a mouse-over

Add the following below your dblclick function:

$('a').mouseover(function(){

var message = "<p>You just moused over a link!</p>";

$('.main').append(message);

});

This responds to a mouse over event over any link.

Responding to a click

Add the following below your mouseover function:

$('#button').click(function() {

$(this).val("Clicked on a button!");

});

This responds to a click on the element whose ID is "button".

The hover() event

Because mouseoverand mouseout events are used together so often, jQuery created the hover event. The hover event is a shortcut way of responding to both events. The hover event should be passed two functions, one to be executed when the mouse moves over something, and the other to be executed when the mouse moves off of something.

Example

Create a new HTML5 project called Page19JQEvents02. Add the following HTML code to the body of your document, replacing the existing body.

<div class="subMenu"

<p>Option 1</p>

<p>Option 2</p>

<p>Option 3</p>

</div>

Add the following to the head of your document (below the <meta> tab):

<script src="

$(document).ready(function(){

$('.menu').hover(

function() {

$('.subMenu').css({'background-color': 'yellow'});

function() {

$('.subMenu').css({'background-color': 'white'});

}

); // hover

});

</script>

When writing code like this, the alignment and the "end" comments (// hover) are very helpful because it can be very difficult to keep track of parentheses and curly brackets in jQuery.

The toggle() event

The toggle event works exactly the same as the hover event except that it responds to clicks rather than mouseover and mouseout events. However, if all you want to do is to make something visible or invisible, you don't need to provide any function arguments at all.

Example

Add the following to your HTML (below the existing HTML):

<p</p>

<p>More stuff</p>

<p>Option 4</p>

<p>Option 5</p>

<p>Option 6</p>

</div>

Note the hidden attribute of the subMenu2 div.

Then add the following to your jQuery code:

$('#menu2').click(function() {

$('#subMenu2').toggle();

});

NOTE: The subMenu2 is hidden at first.

Although the cursor does not change when the mouse moves over menu2, you can still click on the Menu 2 text. The first time you click, subMenu2 becomes visible. The second time, subMenu2 becomes invisible. The third time, it becomes visible again, etc.

You can pass a number to the toggle() function to control how long to take for the item to hide or become visible. The number is the number of milliseconds for the toggle event to last.

$('#menu2').click(function() {

$('#subMenu2').toggle(5000);

});

The Event Object

Whenever a web browser fires an event, it stores information about the event in an event object. The event object holds information about the event (e.g. the element that the event was fired on, the mouse coordinates, etc.). This object is always available. All you have to do is add a parameter to the event handler function.

Event Properties

jQuery normalizes the following properties for cross-browser consistency:

pageXX coordinate of the mouse in the browser window
pageYY coordinate of the mouse in the browser window
screenXX coordinate on the screen
screenYY coordinate on the screen
targetThe DOM element that initiated the event.
relatedTargetThe other DOM element involved in the event, if any.
whichFor key or mouse events, this property indicates the specific key or button that was pressed. Returns the ASCII code of the key. NOTE: Even if you press a lower-case letter, you get the ASCII code of the upper-case letter.

Example

Add the following to your jQuery script:

$(document).click(function(event) {

var x = event.pageX;

var y = event.pageY;

var x2 = event.screenX;

var y2 = event.screenY;

alert('X: ' + x + ' Y: ' + y + ' X2: ' + x2 + ' Y2: ' + y2);

});

Example (keyboard)

Add the following to the bottom of your HTML file:

Add the following to your jQuery script area:

$('#whichkey2').keydown(function(e) {

$('#log2').html(e.type + ': ' + e.which);

});

Example (mouse)

Add the following to the bottom of your HTML file:

<input id="whichkey"value="type something"

Add the following to your jQuery script area:

$('#whichkey').mousedown(function(e) {

$('#log').html(e.type + ': ' + e.which);

});

Tutorial: A One-Page FAQ

Create a new HTML5 project called Page19JQFAQ.html. Copy the contents of the file FAQ.html into your index.html file. Examine the file.

Add your reference to the Microsoft jQuery library:

Add a pair of script tags with the ready function inside:

$(document).ready(function() {

}); // end ready

</script>

Add the following in the ready function:

$('.answer').hide();

Since all of the answers are in the answer class, this should hide them when the page is loaded. There's no event that we are waiting on here, so they will just be hidden.

Then add the following code:

$('.main h2').toggle(

function() {

$(this).next('.answer').fadeIn();

function() {

$(this).next('.answer').fadeOut();

}

);

Things to note about this code:

We are passing two arguments to the toggle function. These arguments are themselves (anonymous) functions! Since we are passing arguments, the argument (functions) list must have commas separating the elements. Each function has no arguments passed to it. Each function has a function body. The function body must be enclosed in curly brackets. Each function consists of a single jQuery statement that must end with a semicolon. Since the toggle statement is itself a jQuery statement, it must end with a semicolon (and the right parenthesis that precedes it marks the end of the parameter list to the toggle method.

JQuery Animations and Effects

Showing and hiding elements

.show()

Makes an element visible. If it's already visible, nothing happens. Accepts an optional speed value (milliseconds).

.hide()

Makes an element invisible. If it's already invisible, nothing happens. Accepts an optional speed value (milliseconds).

toggle()

Switches an element's current display value from visible to hidden or vice-versa.

Fading elements in and out

fadeIn()

Makes a hidden element fade into view. First the space appears, then the element gradually becomes visible. Accepts an optional speed value.

fadeOut()

Makes a visible element fade out of view.

fadeToggle()

If the element is visible, fadeToggle() fades it out. If the element is hidden, fadeToggle() fades it in.

Sliding Elements

slideDown()

Makes a hidden element slide down into view. Accepts an optional speed value.

slideUp()

Makes a visible element slide up out of view. Accepts an optional speed value.

slideToggle()

If the element is visible, applies the slideUp() function. If the element is hidden, applies the slideDown() function.

Tutorial

Create a new HTML5 project called Page19Login.HTML. Copy the signup.html file into your index.html file. Add the following to the ready function:

Add a pair of <script> tags:

</script>

Add the ready function:

$(document).ready(function() {

}); // end ready

Add a click event handler for the #open element:

$('#open').click(function(){

}); // end click

Add code to toggle the login form:

$('#login form').slideToggle(300);

You can also toggle the class:

$(this).toggleClass('close');

Note: to make the toggleClass work, you have to examine the CSS for the close class.

Check out the jQuerycycle plugin:

Sample code for the cycle plugin:

Day19-JQuery03.docx110/10/2018