1、鼠标事件
(1)鼠标单击：click
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标单击事件</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#button").click(function(){
alert("按键被单击了！");
});
});
</script>
</head>
<body>
<button id="button">请点击！</button>
</body>
</html>
（2）鼠标双击事件：dblclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标单击事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("button").dblclick(function(){
alert("鼠标双击了！！");
});
});
</script>
</head>
<body>
<button>请双击，以触发事件！</button>
</body>
</html>
（3）mouseenter鼠标移动到相应元素上的时候触发，mouseleave鼠标不在相应的元素上的时候触发：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标单击事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("p").mouseenter(function(){
alert("鼠标移动到了段落上！");
});
$("p").mouseleave(function(){
alert("鼠标从段落上移开了！");
});
});
</script>
</head>
<body>
<p>Just go. Just go. I just keep going until it feels right to me.</p>
</body>
</html>
(4)hover()：鼠标悬停在元素上的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("p").hover(function(){
$("p").css("background-color","red");
},function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<p>Just go. Just go. I just keep going until it feels right to me.</p>
</body>
</html>
2、键盘事件
(1)keypress()：按键被按下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("input").keypress(function(){
alert("有按键按下了！");
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
（2）keyup()：按键抬起触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按键事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("input").keyup(function(){
alert("按键抬起了！");
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
按下按键没有警告框，只有按键抬起的时候对话框才会出现。
（3）keydown()：按键按下有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按键事件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("input").keydown(function(){
alert("按键按下了！");
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
与keypress不同，keydown是一个过程，只有在按键按下的过程中才会有对话框出现，按键抬起对话框立即消失。
原文地址：https://www.cnblogs.com/zhai1997/p/12236233.html
时间： 2024-10-11 00:36:49