Bootstrap

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')
;