鼠标事件:
click
dblclick
mouseenter:鼠标进入
mouseleave:鼠标离开
hover:鼠标悬停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
$("#eilin").click(function(){
$("p").css("background-color","red");
});
$(".eiling").dblclick(function(){
$("p").css("background-color","black");
});
$("p").hover(function(){
$("p").css("background-color","blue");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
<button id='eilin'>单击</button>
<button class='eiling'>双击</button>
</body>
</html>
键盘事件
keypress:键被按下
keydown:键被按下的过程
keyup:键盘被松开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
i= 0;
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","yellow");
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
$("input").keypress(function(){
$("span").text(i+1);
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
<p>键盘按下的次数:<span>0</span></p>
</body>
</html>
表单事件
submit:当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素。
blur:当失去焦点时发生 blur 事件
focus:获得焦点时发生 focus 事件
change:字段改变时警报文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("提交");
});
$("input[name='FirstName']").change(function(){
alert("文本已被修改");
});
$("input[name='LastName']").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});
$("input").blur(function(){
alert("输入框失去了焦点");
});
});
</script>
</head>
<body>
<form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
<p><span>12</span></p>
</form>
</body>
</html>
文档/窗口事件
load:当指定的元素已加载时，会发生 load 事件(适用于任何带有 URL的元素（比如图像、脚本、框架、内联框架）以及 window 对象)
resize:当调整浏览器窗口大小时，发生 resize 事件
scroll:当用户滚动指定的元素时，会发生 scroll 事件(所有可滚动的元素和 window 对象（浏览器窗口）)
unload:当离开页面时，显示提示消息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
y=0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text(x+=1);
});
$(window).unload(function(){
alert('unload');
});
$(window).resize(function(){
$('span').text(y+=1);
});
$('image').load(function(){
alert('load successful');
});
});
</script>
</head>
<body>
<p>尝试滚动 div 中的滚动条</p>
<div style="border:1px solid black;200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！
<br><br>
菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>
<p>滚动了 <span>0</span> 次。</p>
<p>当你点击 <a href="//www.runoob.com">这个链接</a>, 或者关闭窗口，alert 窗口会弹出。</p>
<image src="//www.runoob.com/wp-content/uploads/2015/11/rock600x400.jpg" alt="图片文字描述" width="304" height="236"/>
</body>
</html>