jQuery Event
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: "The keypress event fires when you press the key."
Event list.
1.blur() Triggered when focus is lost. Including mouse click to leave and TAB key to leave.
2.change() When the element gains focus, it is triggered when the value changes and loses focus.
3.click() Fired when the mouse is clicked.
4.dblclick() Triggered when the mouse is double-clicked.
5.error() Fired when a JavaScript error occurs or the src attribute of img is invalid.
6.focus() Fired when an element gains focus. Note: Some objects are not supported.
7.focusin() Triggered when an element or its sub-elements gain focus. The difference from focus() is that it can detect when its internal sub-elements gain focus.
8.focusout() Triggered when an element or its sub-elements lose focus. The difference from focusout() is that it can detect when internal sub-elements lose focus.
9.keydown() Fired when the keyboard is pressed.
10.keyup() Triggered when the key is released.
11.mousedown() Triggered when the mouse is clicked on the element.
12.mouseenter() Triggered when the mouse passes over the element. The difference between mouseenter and mouseover is that it will also be triggered when the mouse passes over the child elements of mouseover, but mouseenter will not.
13.mouseleave() Fired when the mouse moves out of the element.
14.mousemove() Fired when the mouse moves over the element. .clientX and .clientY represent the X coordinate and Y coordinate of the mouse respectively.
15.mouseout() Fired when the mouse moves away from the element.
16.mouseover() Fired when the mouse moves into an element.
17.mouseup() Fired when the left mouse button is pressed and released.
18.resize() Fired when the size of the browser window changes. $(window).resize();
19.scroll() Fired when the scroll bar changes.
20.select() Triggered when the content in the input is selected.
21.submit() Submit the selected form.
22.unload() Triggered when the page is unloaded.
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()
$(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">
<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>dblclick()
When an element is double-clicked, the dblclick event occurs.
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">
<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(), mouseover() comparison:
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave( )
The mouseleave event occurs when the mouse pointer leaves an element.
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 is used to simulate cursor hovering Stop 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.
<!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()
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 a 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>blur()
When the element loses focus, 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