Franc Stratton's .NET (TM) Web Application, OOP, and SOA Architecture & Programming Site

A site devoted to ASP.NET (TM), SilverLight (TM) and Browser-Based WPF (TM) Applications, IIS Services, and OOP Architectures
Home     .NET Security     Standards     Data Store     Windows Form Apps     WF/WCF/WPF     jQuery     C# Developer Corner     Java Development     Site Map      
jQuery Basics for ASP.NET
jQuery Selectors
jQueryEvents
Event Handler Methods
jQuery Special Effects
Simple Page Styling
jQuery Callbacks
jQuery Page Method
jQuery Data Method
Simple Dirty Flag
Advanced Dirty Flag
AJAX Call to Web Service
jQuery Events with Functions for ASP.NET Applications

 

jQuery events with functions bind a function to an event for all selected elements. For example:

 

$("input").click(function(){$"txtSSN").hide()})

 

The jquery example above will hide the SSN text box control with id="txtSSN" when any input element on the page is clicked.

 

Since jQuery handles HTML events, the developer will make jQuery code much easier to maintain if the programmer:

  • puts all jQuery code inside event handling functions
  • places all event handling functions inside the document ready event handler
  • encapsulates all jQuery code in a separate .js file (my suggestion is to have each ASP.NET .cs file have it's own jQuery/JavaScript file).
  • renames the jQuery library conflicts (e.g., var jQ = jQuery.noConflict(), substitues jQ for the $).

 

The list of events for jQuery include:

 

 EventFormatExample Description

ready

 $(document).ready(function)

$(document).ready(function() {
    $("#txtFirst").blur(function () {
        $("#txtFirst").css("background-color", "#D6D6FF");
    });
}); 

 Occurs when the DOM has loaded, and the page has been completely rendered (including images).

blur

 $(selector).blur(function)

see above blur function

Specifies the function to run when the selected element or elements loose focus. 

change

$(selector).change(function) 

$("#txtLastName").change( function(){

$("txtLastName").css("background-color", "#D6D6FF").});

});

The change event occurs when the value of text fields, text areas and select elements change. The jQuery change() function specifies what happens when the control change event occurs. 

click

 $(selector).click(function)

$("#btnChange").click( function(){

$("txtLastName").css("background-color", "#D6D6FF").});

});

 

Binds a function to the selected element or elements that can have a click event. 

dblclick

 $(selector).dblclick(function)

$("#iconLink").dblclick(function(){
  $("#para1").hide();
}); 

Binds a function to the selected element or elements that can have a double-click event. 

focus

$(selector).focus(function) 

$("#txtFirst").focus(function () {
    $("#txtFirst").css("background-color", "#FF3333");
});

The focus event occurs when an element is selected by a mouse click or by tabbing to it. The jQuery focus() triggers an element focus event without a parameter, or with a function parameter, it specifies what occurs when a focus event happens. 

keypress

 $(selector).keypress(function)

$("#txtName").keypress(function () {
    alert("keypress happened");
}); 

This jQuery event occurs when an element with focus is left mouse clicked and depressed. Like the keydown event, the keypress event occurs for each inserted character. The keypress method also triggers the blur event above, or if the function parameter is set, it specifies what occurs when a keypress event happens. 

keydown

$(selector).keydown(function) 

$("#txtKeydown").keydown(function () {
    alert("keydown happened");
}); 

This jQuery event occurs when an element with focus has a key depressed. Like the keypress event, the keydown event occurs for each inserted character. If the function parameter is set, it specifies what occurs when a keydown event happens. If the keydown event is set on the DOM, this event will occur on any page element.

keyup

$(selector).keyup(function) 

$("#txtKeyup").keyup(function () {
    alert("keyup happened");
}); 

 This jQuery event occurs when an element with focus has a key released. Like the keypress event, the keyup event occurs for each inserted character. If the function parameter is set, it specifies what occurs when a keyup event happens. If the keyup event is set on the DOM, this event will occur on any page element.

mousedown

$(selector).mousedown(function) 

$("#txtmousedown").mousedown(function () {
    alert("mousedown happened");
}); 

 

This jQuery event occurs when an element with focus has a mouse pointer over it and the mouse left click is performed. If the function parameter is set, it specifies what occurs when a mousedown event happens.

mouseover

$(selector).mouseover(function)  

 $("#txtmouseover").mouseover(function () {
    alert("mouseover happened");
}); 

This jQuery event occurs when an element has a mouse pointer over it. If the function parameter is set, it specifies what occurs when a mouseover event happens.

 

mouseleave

$(selector).mouseleave(function)  

$("#txtmouseleave").mouseleave(function () {
    alert("mouseleave happened");
});  

This jQuery event occurs when an element has a mouse pointer leaves it. If the function parameter is set, it specifies what occurs when a mouseleave event happens. 

mouseenter

$(selector).mouseenter(function)   

$("#txtmouseenter").mouseenter(function () {
    alert("mouseenter happened");
});   

This jQuery event occurs when an element has a mouse pointer enters it. If the function parameter is set, it specifies what occurs when a mouseenters event happens.

 select

$(selector).select(function)

$("#txtselect").select(function () {
    alert("selecthappened");
});  

This jQuery event occurs when an element occurs when the text is selected (highlighted) in a text area or text input element.If the function parameter is set, it specifies what occurs when a select event happens.

 
 submit

$("form").submit(function(e){
  alert("Form Submit Event Occurred");
});