推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/
概要:
jQuery在写事件上比JavaScript方便。至少不必考虑浏览器兼容性问题而用js实现处理多播事件委托的函数了。
内容:
一般在用修改属性的方式添加事件,是不好的:
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};
这种方式的弊端是:
1. 只能为一个事件绑定一个事件处理函数. 使用"="赋值会把前面为此时间绑定的所有事件处理函数冲掉.
2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:
使用jQuery添加事件的好处:
- 1. 添加的是多播事件委托. 也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
- 统一了事件名称.
添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom , 因为内部jQuery已经帮我们统一了事件的名称. - 可以将对象行为全部用脚本控制.
例子:
$("#testDiv4").bind("click", showMsg);
$("#testDiv4").bind("click", function(event) { alert("one"); });
$("#testDiv4").bind("click", function(event) { alert("two"); });
常用事件:
Bind(type,[data],fn),one(type,[data],fn)(只一次):
function show() {
alert("鼠标移动div");
}
$("div").one("mousemove", show);//有几个绑定,几个各执行一次
$("div").bind("click", function () {alert("点击了") });
functionshow(event){
alert(event.data.idd);
}
$("div").bind("click", { idd: "aaa" },show);
$("div").bind("click",function () {alert("hehe") });
Trigger(type,[data]),triggerHandler(type,[data]):
在程序中触发事件。Trigger默认触发浏览器动作,triggerHandler不会有浏览器默认动作。
<buttonid="old">.trigger("focus")</button>
<buttonid="new">.triggerHandler("focus")</button><br/><br/>
<input type="text"value="To Be Focused"/>
<scripttype="text/javascript">
$("#old").click(function () {
$("input").trigger("focus"); //会触发三次
});
$("#new").click(function () {
$("input").triggerHandler("focus");//只触发一次
});
$("input").focus(function () {$("<span>Focused!</span>")
.appendTo("body").fadeOut(1000); }); //并在1000毫秒后消失
</script>
Unbind([type],[data]):
删除绑定事件。
.unbind();删除所有绑定事件
.unbind(“click”);删除所有单击事件
.unbind(show);删除绑定的show函数事件
快捷事件函数:
click([fn]):没有数值为触发事件,有值为绑定事件
Blur([fn]):失去焦点
Change([fn]):$(“input[type=’text’]”).change(function(){//验证验证码代码});
Dblclick([fn]):双击
Error([fn]):
$(window).error(function(msg,url,line){jQuery.post("
js_error_log.
php",
msg: msg, url: url, line: line });}); //在服务器端记录错误
$(window).error(function(){returntrue;})//隐藏错误
$(“img”).error(function(){$(this).hide();})//隐藏无效图片
。。。。。。
交互处理:
Hover(over,out):
Over为鼠标进入时要触发的函数
Out为鼠标离开时要出发的函数
Toggle(fn,fn…..)
点击依次触发的函数,直到最后一个,再循环。可以用unbind()删除
使用jquer事件对象:
jQuery.event.*;事件对象的获取和事件对象属性的查询。用时参考官方文档。