目录
Jquery中的事件 (1)
加载DOM (1)
事件绑定 (1)
合成事件 (1)
事件冒泡 (3)
事件对象的属性 (3)
移除事件 (4)
模拟操作 (4)
~~~笔记是本人看书时所记，需要测试时所写代码的的发邮箱623565791@https://www.doczj.com/doc/c09468097.html,~ (7)
Jquery中的事件
加载DOM
$(document).ready(function(){});//执行时机，文档中DOM加载完毕即执行，不需要等图片等加载完（window.onload需要）。
简写方式：$().ready(function(){}) ; $(function(){});
$(window).load(function(){});与window.onload一样~
事件绑定
bind（type [,data] ,fn）;
参数1：事件类型click,blur等。
参数2：作为event.data属性值传给事件对象的额外数据对象。表示不知道是干嘛的~！
参数3：处理函数。
注：type比普通的JS少了on。click---onclick
合成事件
hover();和toggle();
a)hover(enter , leave) 当光标移到触发enter事件，当光标移开触发leave事件
b)toggle(fn1 , fn 2 , fn3 ….fnN)用于模拟鼠标连续单击事件，第一次单机触发fn1,第二
次触发fn2….知道最后一个~随后又重头开始~
toggle可以简化很多代码：
----未使用toggle----
$(function(){
$(".article #header").click(function(){
if( $(this).next("#section").is(":visible") && $(this).nextAll("#footer").is(":visible"))
{
$(this).next("#section").hide();
$(this).nextAll("#footer").hide();
$(this).css({"color" : "black" , "background" : "#FFFFFF"});
}
else
{
$(this).next("#section").show();
$(this).nextAll("#footer").show();
$(this).css({"color" : "black" , "background" : "#cc00cc"});
}
});
});
----使用toggle----
$(function(){
$(".article #header").toggle(function(){
$(this).next("#section").show();
$(this).nextAll("#footer").show();
$(this).css({"color" : "black" , "background" : "#cc00cc"});
}
,function(){
$(this).next("#section").hide();
$(this).nextAll("#footer").hide();
$(this).css({"color" : "black" , "background" : "#FFFFFF"});
});
});
事件冒泡
a)事件冒泡介绍：元素间嵌套，且都绑定了相同的事件类型，则触发内部元素事件时
外部元素也会触发。之所以叫冒泡，因为传递是层层向外的,像水泡一样往外冒。
eg:body中含有div，div中含有panel，3个元素绑定click事件，当panel触发时，触发顺序为：panel---div---body
b)处理事件冒泡：
i.使用事件对象处理事件冒泡
$(“span”).bind(“click” , function(event){//event事件对象
//..doSomeThing
event.stopPropagation();//停止事件传播（冒泡），当然也可以改为
//return false；
});
ii.阻止默认行为：
网页中有的元素有默认应为，例如表单有自动提交的行为，单机链接后会
跳转等。
Eg:校验表单：
$(“#sub”).bind(“click” , function(event){
//表单内容不合法
event.preventDefault();//阻止默认行为（表单提交）,当然也可以
//改为return false；
});
iii.事件捕获：事件捕获和事件冒泡刚好是相反的过程。Body—div---panel ,遗憾的是jquery并不支持事件捕获。
事件对象的属性
$(function(){
$("div").click(function(e){
alert(e.type);//获得事件类型--click
alert(e.target.style.width);//e.target获得响应事件的对象
switch(e.which)//在鼠标单机事件中，获得左键、右键、中键
{
case 1 :alert("左键");break;
case 2:alert("中键");break;
case 3 :alert("右键");break;
}
});
});
e.metaKey()键盘事件中获取ctrl键。
e.originalEvent():指向原始的事件对象。
移除事件
unbind([type][,fn ]);
参数1：需要移出的事件类型
参数2：具体绑定的函数,不要加引号~
u nbind(“click”);移出元素所有的click事件
a)移出元素按钮上的以前注册的事件
删除元素的所有click事件：$(“delAll”).click(function(){$(“btn”).unbind(“click”); });
删除元素的所有事件：$(“delAll”).click(function(){$(“btn”).unbind(); });
b)移出元素按钮上具体的一个函数
$("button:eq(2)").click( fun1 = function(){
alert("具体的事件1~");
}).click( fun2 = function(){
alert("具体的事件2~")
}).click( fun3 = function(){
alert("具体的事件3~")
});
$("button:eq(3)").click(function(){
$("button:eq(2)").unbind("click",fun2);//删除具体的绑定函数fun2
});
c)对与只要触发一次就立即移出：one();
one(type [,data] , fn);
$("button:eq(4)").one("click" , function(){
alert("only invoke ones~");
});//只触发一次~
模拟操作
trigger(type[,data]);
参数1：要触发的事件类型。
参数2：要传递给事件处理函数的附加数据，以数组形式传递。
a）常用模拟
模拟用户单机，不需要用户真正点击~
$(function(){
$("button:eq(0)").bind("click" , function(){alert("不需要用户单机哦~")});
// $("button:eq(0)").trigger("click"); //模拟触发单机事件b
$("button:eq(0)").click();//简写方式
});
b）触发自定义事件
$(function(){
$("button:eq(0)").bind("myClick" , function(){alert("模拟myClick事件~~")});
$("button:eq(0)").trigger("myClick");
//$("button:eq(0)").myClick();貌似这样不行~因为没有myClick函数吧~ });
c）传递数据：
trigger(type[,data]);
参数1：要触发的事件类型。
参数2：要传递给事件处理函数的附加数据，以数组形式传递。
$(function(){
$("button:eq(0)").bind("myClick" , function(event , msg1 , msg2){alert("模拟myClick事件~传递参数~"+msg1 + "," +msg2)});
$("button:eq(0)").trigger("myClick" , ["我的自定义" , "事件"]);
});
d)执行默认操作
trigger()方法触发事件后，会使浏览器执行默认操作。
$(“input”).trigger(“foucs”);//不但会触发input的focus事件，还会让input获得焦点~ 若只希望触发focus事件，不执行浏览器默认操作，使用jquery中triggerHandler（）方法。即：$(“input”).triggerHandler(“foucs”);
e)其他用法
i.bind一次性绑定多个事件
$(“div”).bind(“ mouseover mouseout” , function(){
this.toggerClass(“over”);
});
ii.添加事件命名空间，便于管理
$(function(){
$("div").bind("click.plugin" , function(){alert("click.plugin~")})
.bind("dblclick", function(){alert("dbClick");}).bind("mouseover.plugin" ,
function(){$(this).html("mouser.plugin~")});
$("button:eq(0)").click(function(){
$("div").unbind(".plugin");//在删除事件时，只要指明事件的命名空间即可~ 注
//意有个点~.plugin~ 还有dblclick这么写
});
});
iii.相同事件名称不同事件命名空间的方法
$(function(){
$("div").bind("click.plugin" , function(){alert("click.plugin~")})
.bind("click", function(){alert("click");});
$("button:eq(0)").click(function(){
$("div").trigger("click!");//！代表触发所有不包含在命名空间//中的click方法~！即弹出click
$("div").trigger("click");//触发所有click事件
});
});
~~~笔记是本人看书时所记，需要测试时所写代码的的发邮箱623565791@https://www.doczj.com/doc/c09468097.html,~