bind()方法绑定事件
1.绑定一种事件
.bind("click",function(){
....
})
2.绑定多个事件,通过对象的方式
.bind({"click":function(){},"mouseover":function(){}...)})
为创建子元素绑定事件
父元素.delegate("要绑定事件的元素","事件名","执行函数")
对应解绑事件undelegate('p','click')
通过on方法绑定事件(常用)
on('event',[child],fn)
如果指定两个参数,第一个为事件名,第二个为事件执行函数,则将事件绑定到当前元素
如果指定三个参数 ,第一个为事件名 ,第二个为要绑定事件的子元素,第三个为事件执行函数则绑定当前元素指定的子元素上
对应解绑事件
off('event)
;
off('click','**')
只将子元素的事件解绑
off()
;移除父及元素和子级元素所有事件
off(event)细节问题
如果父元素和子元素在正常绑定事件,父元素通过off方式解绑事件时,只会解除父元素的事件
$(function(){
$('div').click(function(){
console.log('div');
})
$('p').click(function(){
console.log('p');
})
$('button').click(function(){
$('div').off('click');//不会解除子元素的事件
})
})
如果子元素是通过父元素调用dalegate
或on
的方式绑定事件,那么父元素和子元素相同的事件都会被解绑
$('div').click(function(){
console.log('div');
})
$('div').delegate('p','click',function(){
console.log('p')
})
// $('div').on('click','p',function(){
// console.log('p')
// })
$('button').click(function(){
$('div').off('click');//父元素与子元素相同事件被解绑
})
触发事件
简单的说就是使一个元素的事件在另一个元素调用
触发事件方式:
1.$('#btn1').click()
;直接调用btn1的点击事件
2.$('#btn1').trigger('click');
与上面一致
3. triggerHandler()
三种触发事件区别
-
第一中触发事件的方式与第二种触发事件的方式相同
且可以触发浏览器默认事件 -
第三种方式不会触发浏览器默认事件如
focus
$('button').click(function(){
$('input').trigger('focus');//触发浏览器默认事件,input获取焦点
})
$('button').click(function(){
$('input').triggerHandler('focus');// 不会触发浏览器默认事件
})