首页 > 代码库 > jQuery--事件总结
jQuery--事件总结
标准的绑定:
bind(type,[,data],fn)==>第一个参数是事件类型 第二个可选参数作为event.data 传递给事件对象的额外数据对象 第三个参数为用来绑定的处理函数
简写绑定事件:
$(‘#panel h5.head‘).mouseover(function(){
});
合成事件:
hover(enter,leave) hover事件用来模拟鼠标的悬停事件 $(‘.head‘).hover(function(){},function(){})
toggle(fn1,fn2,fn3....fnN) $(‘.head‘).toggle(function(){},function(){}) toggle函数还有一个作用 切换元素的可见状态 $(‘p‘).toggle();
事件冒泡:
<div><p><span></span></p></div>例如 在div中添加了点击事件 p也添加了点击事件 span 也添加了点击事件当点击span标签时候会触发三个click事件
这个现象就是事件冒泡
事件冒泡导致的此问题jquery提供了解决方案: event.stopPropagation();
事件对象的属性:
event.type() 获取到事件的类型
event.preventDefault 组织浏览器的默认事件
event.stopPropagation 阻止事件冒泡
event.target 获取事件源
event.pageX()/event.pageY()==>获取光标相对于页面的x坐标和y坐标
event.which() ==>获取作用鼠标的哪个键点击的 1.左键 2.中键 3.右键
移除事件:
unbind $(‘p‘).unbind(‘click‘);
one(type,[,data],fn) one事件提供了一种方式 一次触发事件后删除
模拟操作:
$(‘#btn‘).trigger(‘click‘);
其他操作:
同时绑定多个事件类型:
$(‘div‘).bind(‘mouseover mouseout‘,function(){
$(this).toggleClass(‘over‘);
})
添加命名空间:
$(‘div‘).bind(‘click.plugin‘,function(){})
$(‘div‘).bind(‘mouseover.plugin‘,function(){})
$(‘div‘).bind(‘dbclick‘,function(){})
$(‘button‘).click(function(){
$(‘div‘).unbind(‘.plugin‘);
})
事件类型后面添加命名空间,这样删除事件的时候只需要删除命名空间就可以了
触发命名空间的事件:
$(div).trigger(‘click‘); ==>这样有没有命名空间都可以触发
$(div).trigger(‘click!‘); ==>这样有叹号的只能触发不带有命名空间的事件
jQuery--事件总结