Latest web development tutorials

jQuery Event

jQuery is specially designed for the event handler.

What is the event?

Page response to different visitors called events.

Event handler method means that when certain events occur HTML when invoked.

Example:

  • Move the mouse over an element.
  • Select the radio button
  • Click element

The term is often used in the event "trigger" (or "excitation"), for example: "trigger keypress event when you press the keys."

Common DOM events:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload  

jQuery event method syntax

In jQuery, most DOM events have an equivalent of jQuery methods.

Page, specify a click event:

. $ ( "P") click ();

The next step is to define what time trigger events. You can implement an event function:

$ ( "P"). Click (function () {
After the code !! // action is triggered
});

Commonly used jQuery event method

$ (document) .ready ()

$ (Document) .ready () method allows us to fully load the document after the function execution. The event method in jQuery syntax section has been mentioned.

click ()

click () method when the button click event is triggered calls a function.

This function is executed when the user clicks on an HTML element.

In the following example, when you click on an event-triggered <p> element to hide the current <p> element:

Examples

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

try it"

dblclick ()

When you double-click the element, dblclick event occurs.

dblclick () method dblclick trigger event, or a predetermined function to run when the event occurs dblclick:

Examples

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

try it"

mouseenter ()

When the mouse pointer across the element, mouseenter event occurs.

mouseenter () method mouseenter trigger event, or a predetermined function to run when the event occurs mouseenter:

Examples

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

try it"

mouseleave ()

When the mouse pointer leaves the element, mouseleave event occurs.

mouseleave () method mouseleave trigger event, or when a predetermined function to run when the event occurs mouseleave:

Examples

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

try it"

mousedown ()

When the mouse pointer moves over the element and pressing the mouse button, mousedown event occurs.

mousedown () method triggers the mousedown event or function specified when running mousedown event occurs:

Examples

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

try it"

mouseup ()

When the mouse button is released over an element, mouseup event occurs.

mouseup () method mouseup trigger event, or a predetermined function to run when the event occurs mouseup:

Examples

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

try it"

hover ()

hover () method is used to simulate the cursor hovers over the event.

When the mouse moves to the elements, it will trigger the first specified function (mouseenter); when the mouse moves off of the element, it will trigger the second specified function (mouseleave).

Examples

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

try it"

focus ()

When the element gets focus, focus events occur.

When a mouse click on the selected element or elements by targeting tab key, the element will be the focus.

focus () method triggers the focus event, or a predetermined function to run when the event occurs focus:

Examples

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

try it"

blur ()

When the element loses focus, blur event occurs.

blur () method triggers the blur event or function to run when a predetermined event occurs blur:

Examples

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

try it"