03-jQuery事件绑定和解绑

一、绑定事件

on()、one（）、hover（）、常用事件函数

• on()：

1、基础绑定事件
语法：元素集合.on('事件类型'，事件处理函数)
$('div').on('click',function(){})

2、元素委托绑定事件
语法：元素集合.on('事件类型'，选择器，事件处理函数)
事件委托，把p元素的事件委托给div，把事件绑定给div元素，当你在div内的p标签触发事件时，执行事件处理函数
$('div').on('click','p',function(){})

3、批量绑定事件
语法：元素集合.on({事件类型1:处理函数，事件类型2:处理函数})
注意：不能进行事件委托了
$('div').on({
    click:function(){}
    mouseover: function(){}
    mouseout:function(){}
})

• one():

只执行一次，语法和on()一样

1、基础绑定事件
语法：元素集合.one('事件类型'，事件处理函数)
$('div').one('click',function(){})

2、元素委托绑定事件
语法：元素集合.one('事件类型'，选择器，事件处理函数)
事件委托，把p元素的事件委托给div，把事件绑定给div元素，当你在div内的p标签触发事件时，执行事件处理函数
$('div').one('click','p',function(){})

3、批量绑定事件
语法：元素集合.one({事件类型1:处理函数，事件类型2:处理函数})
注意：不能进行事件委托了
$('div').one({
    click:function(){}
    mouseover: function(){}
    mouseout:function(){}
})

• hover

鼠标移入移出触发
不能做事件委托

元素集合.hover(移入时触发的函数，移出时触发的函数)
当你只传递一个函数的时候，移入移除都会触发

例如：
$('div').hover(
function(){},
function(){}
)

常用事件函数：

click()
mouseover()
mouseout()
change()

$('div').click(function(){})

二、解绑和触发

off()事件解绑和 trigger()事件触发

举个例子：

//准备事件处理函数
function handleA(){}
function handleB(){}
function handleC(){}

//给div元素绑定事件
$('div')
.click(handleA)
.click(handleB)
.click(handleC)

off()事件解绑

解绑全部事件处理函数
$('div').off('click')
解绑指定事件处理函数
$('div').off('click',handleA)

trigger()事件触发，使用代码方式来触发事件

$('div').trigger('click')