鼠标事件:
- click
- dblclick
- mouseenter 鼠标焦点进入元素范围
- mouseleave 鼠标焦点离开元素范围
- hover 鼠标焦点进入/离开元素范围 有两个回调函数
$(\'div\').click(function(){alert(\'单击\');})$(\'div\').dblclick(function(){alert(\'双击\');})/*注意 在单击双击 同时设定的情况下 单击触发的是单击事件 双击触发的也是单击事件*/
/*效果是 鼠标焦点进入元素范围p颜色变红*/$(\'p\').mouseenter(function(){$(this).css(\'background-color\',\'red\');})/*效果是 鼠标焦点离开元素范围p颜色变绿色*/$(\'p\').mouseleave(function(){$(this).css(\'background-color\',\'green\');})/*效果是 鼠标焦点进入元素范围p颜色变红 鼠标焦点离开元素范围p颜色变绿色*//*与上面两个事件效果等效*/$(\'p\').hover(function(){$(this).css(\'background-color\',\'red\');},function(){$(this).css(\'background-color\',\'green\');});
键盘事件
- kegdown 键被按下的过程
- keypress 键被按下
- keyup 键被松开
$(\"input\").keypress(function(){console.log(\'keypress\');});$(\"input\").keyup(function(){console.log(\'keyleave\');});$(\"input\").keydown(function(){console.log(\'keydown\');});
执行结果
表单事件
- submit 表单提交
- change 表单文本修改
- focus 鼠标获取表单输入框焦点
- blur 鼠标失去表单输入框焦点
/*submit 表单提交*/$(function(){$(\"form\").submit(function(){alert(\"提交\");});})<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=\"提交\"></form></body>
文档/窗口事件
- load 数据加载完成
- resize 用户改变浏览器窗口大小
- scroll 滚动条滚动
- unload 加载失败