Home >Web Front-end >Front-end Q&A >Can jquery listen to events?
jquery can listen to events. jquery provides a variety of event monitoring methods: 1. click(), which can monitor click events and specify event processing functions; 2. change(), which can monitor change events and specify event processing functions; 3. dblclick(), which can Monitor double-click events; 4. hover(), etc.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery can listen to events.
jquery provides a variety of methods for listening to events, such as click(), on() and other methods. Here are some methods.
1. Click() method:
The click() method specifies the function to be run when a click event occurs
Example: Click element when alert text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").click(function() {
alert("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>
2. change() method
change() method specifies when a change event occurs function to run.
Example: Alert text when the field changes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("文本已被修改");
});
});
</script>
</head>
<body>
<input type="text">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
</body>
</html>
3, dblclick()
## The #dblclick() method specifies a function to run when a double-click event occurs. Example: Alert text when double-clicking theelement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").dblclick(function() {
alert("这个段落被双击。");
});
});
</script>
</head>
<body>
<p>双击这个段落。</p>
</body>
</html>
4, hover() method## The #hover() method specifies two functions to run when the mouse pointer hovers over the selected element.
Method triggers mouseenter and mouseleave events.
Example: Change the background color of the
element when the mouse pointer is hovering over it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").hover(function() {
$("p").css("background-color", "yellow");
}, function() {
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video]
Method
Description
bind()
Add an event handler to an element
blur()
Add/trigger the lost focus event
delegate()
To the current value of the matching element or future child element addition handlers
die()
was removed in version 1.9. Remove all event handlers added via the live() method
error()
Deprecated in version 1.8. Add/trigger error event
focus()
Add/trigger focus event
focusin()
Add event handler to focusin event
focusout()
Add event handler to focusout event
keydown()
Add/trigger keydown event
keypress()
Add/trigger keypress event
keyup()
Add/trigger keyup event
live()
Removed in version 1.9. Add one or more event handlers to the current or future selected elements
load()
Deprecated in version 1.8. Add an event handler to the load event
mousedown()
Add/trigger the mousedown event
mouseenter ()
Add/trigger mouseenter event
mouseleave()
Add/trigger mouseleave event
mousemove()
Add/trigger mousemove event
mouseout()
Add/trigger mouseout event
mouseover()
Add/trigger mouseover event
mouseup()
Add/trigger mouseup event
off()
Remove event handlers added through the on() method
on()
Add to elements Event Handler
one()
Adds one or more event handlers to the selected element. This handler can only be triggered once per element
resize()
Add/trigger resize event
scroll ()
Add/trigger scroll event
select()
Add/trigger select event
submit()
Add/trigger submit event
trigger()
Trigger all events bound to the selected element
triggerHandler()
Trigger all functions bound to the specified event of the selected element
unbind()
Remove the added event handler from the selected element
undelegate()
Remove the event handler from the current or future selected element
unload()
Deprecated in version 1.8. Add event handler to unload event
contextmenu()
Add event handler to contextmenu event
The above is the detailed content of Can jquery listen to events?. For more information, please follow other related articles on the PHP Chinese website!