jQuery事件与动画

一、事件

1、什么是事件？

页面对不同的访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件事件所调用的方法。

2、jQuery事件的分类

① 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
dblclick()	触发或将函数绑定到指定元素的dblclick事件	双击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标移动时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标移出时
hover()	当鼠标移动到元素上，会触发指定的第一个函数(mouseenter)； 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)	鼠标移入移出

② 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown()事件	按下键盘时
keyup()	触发或将函数绑定到指定元素的keyup()事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress()事件	产生可打印的字符时

③ 表单事件

当元素获取焦点时，会触发focus事件，失去焦点时，会触发blur事件。 

方法	描述	执行时机
focus()	当元素获取焦点时，会触发focus事件	获取焦点
blur()	失去焦点时，会触发blur事件	失去焦点
change()	当元素的值改变时发生change事件	值改变

3、事件绑定

除了使用事件名绑定事件外，还可以通过其他方式绑定事件：

band事件绑定>>>delegate事件绑定>>>on事件绑定

① bind绑定事件

// 第一个参数：事件类型
// 第二个参数：事件处理程序
$("p").bind("click",function(){
    // 事件响应方法
})

缺点 ：不支持动态事件绑定

② delegate 注册委托事件

// 第一个参数：selector,要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理程序
$(".name").delegate("p","click",function(){
    // 为.name下面的所有p标签绑定事件
})

缺点 ：只能注册委托事件，因此注册事件需要记住方法太多了

③ on 绑定事件

第一种：bind(事件类型,事件处理函数)
$("div").bind("click",function(){
    $(this).css("color","green")
})
// 第二种：一次绑定多个事件
$("div").on({
    "click":function(){
        $(this).css("color","green")
    },
    "mouseover":function(){
        $(this).css("background-color","pink")
    },
    "mouseout":func