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中文网(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中文网(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>双击鼠标左键的，我就消失。</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中文网(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("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</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中文网(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("鼠标在该段落上按下！");
});
});
</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("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 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中文网(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
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
