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 radio button
Click element
The term "trigger" (or "fire") is often used in events. For example: "keypress fires when you press the key event".
Common DOM Event:
# Click DBLCLICK MOUSEENTER Mouseleave
## Keypress Keydown keyup blur
## form event submit change focus unload
##document/window event load resize scroll
jQuery event Method SyntaxIn 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()
$(document).ready() method allows us to wait until the document is fully loaded Execute function. 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>dblclick()
When 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:
<!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>mouseenter()
When the mouse pointer passes through the element, it will A mouseenter event occurred.
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> mouseleave()
When the mouse pointer When leaving an element, the mouseleave event occurs.
mouseleave() method triggers the mouseleave event, or specifies the function to be run when the mouseleave 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").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>mousedown()
When the mouse pointer moves over the element, and The mousedown event occurs when the mouse button is pressed.
The mousedown() method triggers the mousedown event, or specifies a function to 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>mouseup()
When the mouse button is released on the element , the mouseup event will occur.
mouseup() method triggers the mouseup event, or specifies the function to be run when the mouseup 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").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html> hover()
hover() Method 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> focus()
When an element gains focus, the focus event occurs.
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><br>
Email: <input type="text" name="email">
</body>
</html> blur()
When the element is lost When focused, the blur event occurs.
blur() method triggers the blur event, or specifies the function to run when the blur 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>
Next Section