jQuery events

jQuery is specially designed for event handling.

What is an event?

The response of the page to different visitors is called an event.

Event handlers refer to methods that are called when certain events occur in HTML.

Example:

Move the mouse on the element.
Select a radio button
Click an element

The term "trigger" (or "fire") is often used in events. For example: "The keypress event fires when you press a key".

Common DOM events:

##dblclick keydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunload

jQuery event method syntax

In jQuery, most DOM events have an equivalent jQuery method.

Specify a click event on the page:

$("p").click();

The next step is to define when to trigger the event . You can achieve this through an event function:

$("p").click(function(){
// Code executed after the action is triggered!!
});

Commonly used jQuery event methods

$(document).ready()

$(document). The ready() method allows us to execute the function after the document has completely loaded. This event method has been mentioned in the jQuery Syntax chapter.

click()

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

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

In the following example, when a click event is triggered on a <p> element, the current <p> element is hidden:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

dblclick()

When an element is double-clicked, the dblclick event occurs.

The dblclick() method triggers the dblclick event, or specifies the function to be run when the dblclick event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

##mouseenter()

When the mouse pointer passes through the element , the mouseenter event will occur.

The mouseenter() method triggers the mouseenter event, or specifies the function to be run when the mouseenter event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

mouseleave()

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

mouseleave() method triggers the mouseleave event, or specifies the function to be run when the mouseleave event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

RunInstance»Click the "Run Instance" button to view the online instance

mousedown()

The mousedown event occurs when the mouse pointer moves over an element and the mouse button is pressed.

The mousedown() method triggers the mousedown event, or specifies the function to be run when the mousedown event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

mouseup()

When you release the mouse on the element When the button is pressed, the mouseup event occurs.

The mouseup() method triggers the mouseup event, or specifies the function to be run when the mouseup event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

hover()

hover() method is used for simulation Cursor hover event.

When the mouse moves over the element, the specified first function (mouseenter) will be triggered; when the mouse moves out of the element, the specified second function (mouseleave) will be triggered.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

focus()

The focus event occurs when an element gains focus.

When an element is selected by mouse click or positioned by tab key, the element will gain focus.

The focus() method triggers the focus event, or specifies the function to be run when the focus event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

blur()

Occurs when the element loses focus blur event.

blur() method triggers the blur event, or specifies the function to be run when the blur event occurs:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

RunInstance»

Click the "Run Instance" button to view the online instance

← jQuery selector

submit

php.cn

Mouse events	Keyboard events	Form events	Documentation /window event
click	keypress	submit	load