事件绑定与触发事件

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');//不会解除子元素的事件
	})
})

如果子元素是通过父元素调用dalegateon的方式绑定事件,那么父元素和子元素相同的事件都会被解绑

$('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');// 不会触发浏览器默认事件
})

发布了58 篇原创文章 · 获赞 1 · 访问量 2166

猜你喜欢

转载自blog.csdn.net/weixin_45143481/article/details/104419412