bind(type [, data], fn);
type: focus/blur, focusin/focusout, click/dblclick, load/unload, resize, scroll, mousedown/mouseup, mouseover/mouseout/mousemove,
mouseenter/mouseleave, change, select, submit, keydown/keypress/keyup, error,也可以绑定自定义事件
data: 可选,作为event.data属性值传递给事件对象的额外数据对象
fn: 用来绑定的事件处理函数
one(type [, data], fn); //当处理函数触发一次后,立即删除,只会被执行一次
live(type [,data], fn); //类似于bind,给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
die([type] [,eventName]); //类似于unbind,移除所有通过 live() 函数添加的事件处理程序
delegate(element, type [, data], fn); //类似于live,向匹配元素的当前或未来的子元素附加一个或多个事件处理器,注意只是添加在element元素里面的子元素
undelegate(element); //类似于die,从匹配元素移除所有由delegate() 添加的事件处理器,现在或将来
$("#panel h5.head").bind("click", function(){
var $content = $(this).next("div.content");
if($content.is(":visible"))
$content.hide();
else
$content.show();
});
绑定多个事件:
$("div").bind("mouseover mouseout", funtion(){
$(this).toggleClass("over");
});
通过传入一个映射对来一次绑定多个事件处理函数
$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
2.合成事件
hover(enter, leave); 用于模拟光标悬停事件,当光标移动到元素上时,针对触发指定的第1个函数,移出时触发第2个函数
//相当于mouseenter和mouseleave
toggle(fn1,fn2...fnN); 用于模拟鼠标连续单击事件,第1次触发第1个fn。。。
//另一个作用: 切换元素的可见状态
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
等价于:
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
});
$("#panel h5.head").toggle(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
等价于:
$("#panel h5.head").toggle(function(){
$(this).next("div.content").toggle(); //切换元素的可见状态
},function(){
$(this).next("div.content").toggle(); //切换元素的可见状态
});
3.事件冒泡
停止事件冒泡:
event.stopPropagation();
阻止默认行为:eg, 单击超链接后会跳转,单击提交按钮后表单会提交
event.preventDefault();
//return false; 同时对事件对象停止冒泡和默认行为
jQuery不支持事件捕获,如果需要使用事件捕获,可以直接使用原生的JavaScript。
4.事件对象属性event.type; 事件类型,如click、mouseover、blur等
event.preventDefault(); 阻止默认行为 原IE中不支持
event.isPreventDefault(); 返回 event 对象上是否调用了 event.preventDefault()
event.stopPropagation(); 停止事件冒泡 原IE中不支持
event.target; 获取到触发事件的元素
event.relatedTarget; 相关元素
event.pageX/enent.pageY; 光标相对于页面的x坐标和y坐标,原IE中e.x()/e.y(),Firefox中e.pageX()/e.pageY()
event.which; 鼠标单击事件中获取到鼠标的左、中、右键,1=左键,2=中键,3=右键
event.metaKey; 键盘事件中获取<ctrl>按键
event.originalEvent; 指向原始的事件对象
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
event.result 包含由被指定事件触发的事件处理器返回的最后一个值
$("button").click(function(e) {
return ("最后一次点击的鼠标位置是: X" +e.pageX + ", Y" + e.pageY);
});
$("button").click(function(e) {
$("p").html(e.result);
});
5.移除事件
unbind([type][ , data]); //没有参数则删除所有绑定的事件,有第2个参数,则只有这个特定的函数会被删除
$("#btn").unbind(); //删除所有事件
$("#btn").unbind("click"); //只删除click事件
$("#btn").unbind("click", myfun); //删除指定名称的click事件,名称可以这样指定: $("#btn").bind("click", myfun=function(){...});
6.模拟事件
trigger(type[ ,data]);
triggerHandler(type[ ,data]); //只绑定事件,而不执行浏览器默认操作eg:focus事件与焦点问题
$("btn").trigger("click"); 或者 $("btn").click();
$("btn").bind("myClick", function(event,param1,param2,...){ .....自定义事件 });
$("btn").trigger("myClick", ["param1", "param2",...]);
$("input").trigger("focus"); //不仅触发focus事件,也会使input元素本身得到焦点(这是浏览器的默认操作)
$("input").triggerHandler("focus"); //只触发绑定的focus事件,不会得到焦点
$("input").select(function(){
$("input").after("发生 Input select 事件!");
});
$("button").click(function(){
$("input").triggerHandler("select"); //只会在input元素后面添加"发生 Input select 事件",而不会全部选中input里面的元素(没有执行默认的选中操作)
});
7.事件命名空间
在所绑定的事件后面添加命名空间,这样在删除事件时,只需要指定事件命名空间即可
$("div").bind("dblclick", fn).bind("click.plugin", fn).bind("mouseover.plugin", fn);
删除事件可以直接指定命名空间: $("div").unbind(".plugin");
$("div").trigger("click"); 会触发click和click.plugin事件
$("div").trigger("click!"); 只触发click事件,"!"是匹配所有不包含在命名空间中的click方法