事件绑定
第一种方式:直接使用事件名
例:$("#btn").click(function(){ alert(1) })
第二种方式:on(event,function)
例:$('#btn').on('click', function(){ alert(2);})
第三种方式:bind(event, function)
例:$('#btn').bind('click', function(){alert(3);})
第四种方式:利用事件监听来绑定事件
事件移除
.off():通常用于移除通过on方法绑定的事件
ֺ例: $("p").off("click");
2.unbind():移除被选元素的事件
ֺ例: $("p").unbind();
鼠标事件
1:mouseover 鼠标移入(支持事件冒泡)
2:mouseout 鼠标移出 (支持事件冒泡)
3.mouseleave 鼠标移出(不支持事件冒泡)
4.mouseenter 鼠标移入 (不支持事件冒泡)
5:mousedown 鼠标按下
6:mouseup 鼠标抬起
7:mousemove 鼠标移动
8:click 鼠标单击
9:dbclick 鼠标双击
10:contextmenu 鼠标右键
键盘事件
keydown 键盘按下
keyup 键盘抬起
表单事件
blur 失去焦点事件
focus 获取焦点事件
change 内容发生改变
submit 表单提交事件
复合事件
hover方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
例: $("p").hover(function(){
$("p").css("backgroundColor","yellow");
},function(){
$("p").css("backgroundColor","pink");
});
事件对象属性
Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。
event.type
该属性用于获得触发该事件的类型,对引发事件的不同操作,返回不同结果
例:$("p").click(function(event){alert(event.type);});
该示例返回元素p单机事件的事件类型,结果打印是'click'。
event.target
该属性用于获得触发事件的元素
例:
$("p, button, h1").click(function(event){
$("div").html("通过" + event.target.nodeName + "元素触发");
});
event.pageX 和 event.pageY
用这两个属性可以获得鼠标的相对于页面的当前位置
例:
$(“p").click(function(event){
alert("current mouse location "+event.pageX+" “+event.pageY);
});
event.preventDefault()
阻止默认事件
例: $("a").click(function(event){event.preventDefault();});
使用该属性阻止元素a的默认跳转行为。
event.stopPropagation()
阻止事件冒泡
例:
$('div').click(function(event){
alert('里层点击');
event.stopPropagation();
});
使用stopPropagation()方法阻止div的父元素的click事件被触发。
事件委托
事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
原理:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处:减少事件注册,提高性能。
delegate()
定义和用法:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
语法:$(selector).delegate(childSelector,event,data,function)
最新on方法取替了delegate方法
事件命名空间
事件添加命名空间便于事件的管理:删除事件和触发事件。例:
元素绑定多个事件
$("div").bind("click.plugin",function(){alert("click.plugin");}); $("div").bind("click",function(){alert("click");}); $("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");}); $("div").bind("dbclick",function(){alert("dbclick");});
由于使用了命名空间,可以删除指定命名空间中的事件,如移除所有plugin命名空间下的事件函数方法如下:
$(“button”).click(function(){$("div").unbind(".plugin");});
这样就移除了所有命名空间是plugin的事件函数。div中就只剩下click和dbclick绑定事件。