jQuery事件

Posted 2020-10-05 胡卓

鼠标事件:
1、.click():点击事件
2、.dblclick():双击事件
3、.hover():鼠标悬停和离开
4、.mousedown():鼠标按下
5、.mouseenter():鼠标进入元素
6、.mouseleave():鼠标离开元素
7、.mousemove():鼠标在元素内移动
8、.mouseout():鼠标离开元素（支持事件冒泡）
9、.mouseover():鼠标进入元素（支持事件冒泡）
10、.mouseup():鼠标按键被释放

什么是事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

 

键盘事件：
1、.keydown()
2、.keypress()
3、.keyup()

触发顺序为keydown keypress
keyup只有在上面两个都没有时才能触发

常用键盘按键对应代码

Backspace <----->8
Tab <----->9
Clear <----->12
Enter <----->13
Shift <----->16
Control <----->17
Alt <----->18
Caps Lock <----->20
Esc <----->27
空格键 <----->32

浏览器事件
1、.error() 与某一元素绑定，当该元素发生错误时触发 建议不要使用
2、.resize() 与window绑定，当页面大小发生改变是触发
3、.scroll() 与window或某个元素绑定，当发生滚动时触发

文档加载事件

1.复习js中的ready事件和onload事件:
*ready事件：
ready事件在DOM结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来，js代码一样可以执行。
$().ready(function(){})
$(document).ready(function(){})
$(function(){})
*laod事件：
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据没有加载完毕，导致load事件不能够及时被触发。

文档加载过程
(1)解析html结构。
(2)加载外部脚本和样式表文件。
(3)解析并执行脚本文件。
(4)构造HTML DOM模型。//ready
(5)加载图片等外部文件。
(6)页面加载完成。 //load