WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Event Methods


jQuery is customized to react to occasions in a HTML page.


What are Events?

All the distinctive guest's activities that a website page can react to are called events.

An occasion speaks to the exact minute when something happens.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

The term "fires/fired" is frequently utilized with occasions. Precedent: "The keypress occasion is terminated, the minute you press a key".

Here are some normal DOM events:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

jQuery Linguistic structure For Occasion Methods

In jQuery, most DOM occasions have an equal jQuery method.

To dole out a tick occasion to all passages on a page, you can do this:

$("p").click();

The subsequent stage is to characterize what ought to happen when the occasion fires. You should pass a capacity to the event:

$("p").click(function(){
 /activity goes here!!
});

Commonly Utilized jQuery Occasion Methods

$(document).ready()

The $(document).ready() strategy enables us to execute a capacity when the record is completely stacked. This occasion is as of now clarified in the jQuery Syntax section.

click()

The click() strategy connects an occasion handler capacity to a HTML element.

The work is executed when the client taps on the HTML element.

The following model says: When a tick occasion fires on a <p> component; stow away the current <p> element:

Example

$("p").click(function(){
    $(this).hide();
});

dblclick()

The dblclick() strategy joins an occasion handler capacity to a HTML element.

The work is executed when the client double taps on the HTML element:

Example

$("p").dblclick(function(){
    $(this).hide();
});

mouseenter()

The mouseenter() strategy appends an occasion handler capacity to a HTML element.

The work is executed when the mouse pointer enters the HTML element:

Example

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouseleave()

The mouseleave() technique connects an occasion handler capacity to a HTML element.

The work is executed when the mouse pointer leaves the HTML element:

Example

$("#p1").mouseleave(function(){
    alert("Bye! You presently leave p1!");
});

mousedown()

The mousedown() strategy appends an occasion handler capacity to a HTML element.

The work is executed, when the left, center or right mouse catch is pushed down, while the mouse is over the HTML element:

Example

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

mouseup()

The mouseup() strategy joins an occasion handler capacity to a HTML element.

The work is executed, when the left, center or right mouse catch is discharged, while the mouse is over the HTML element:

Example

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});

hover()

The drift() strategy takes two capacities and is a mix of the mouseenter() and mouseleave() methods.

The first work is executed when the mouse enters the HTML component, and the second work is executed when the mouse leaves the HTML element:

Example

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You presently leave p1!");
});

focus()

The center() technique connects an occasion handler capacity to a HTML structure field.

The work is executed when the structure field gets focus:

Example

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});

blur()

The obscure() technique connects an occasion handler capacity to a HTML structure field.

The work is executed when the structure field loses focus:

Example

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});

The on() Method

The on() strategy appends at least one occasion handlers for the chose elements.

Attach a tick occasion to a <p> element:

Example

$("p").on("click", function(){
    $(this).hide();
});

Attach different occasion handlers to a <p> element:

Example

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});




Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
welookups.com