jQuery events
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 the radio button
Click on the element
The term "trigger" is often used in events "(or "fire") For example: "The keypress event fires when you press a key."
Common DOM events:
| Event | Description |
|---|---|
| click | This event is triggered when the mouse is clicked |
| keypress | Triggered when a key on the keyboard is pressed and released again |
| submit | Triggers when the form is submitted |
| load | Triggers when the page is loaded |
| dblclick | Double click of the mouse is triggered |
| keydown | Triggered when a key on the keyboard is pressed |
| change | Triggered when the current element loses focus and the element content changes |
| resize | Triggered when the browser window size is changed |
| mouseenter | Add/trigger mouseenter event |
| keyup | Triggered when a key on the keyboard is pressed and then released |
| focus | Triggered when an element loses focus |
| scroll | Add/trigger scroll event |
| mouseleave | Add/trigger mouseleave event |
| blur | Add/trigger blur event |
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 the event is triggered . 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()## The
#$(document).ready() method allows us to execute a 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:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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 the program to try it
dblclick()
The dblclick event occurs when an element is double-clicked. The dblclick() method triggers the dblclick event, or specifies a function to be run when a dblclick event occurs:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>雙擊鼠標(biāo)左鍵的，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>Run the program to try itmouseenter()
The mouseenter event occurs when the mouse pointer passes through an element. The mouseenter() method triggers the mouseenter event, or specifies the function to be run when the mouseenter event occurs:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會看到彈窗。</p>
</body>
</html>Run the program to try itmousedown()
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:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落</p>
</body>
</html>Run the program to try ithover()
#hover() method is used to simulate cursor hover events. 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.<!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("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>Run the program and try itfocus()
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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 the program to try it
If you are interested, you can try it Other events
