web前端之锋利的jQuery四：jQuery中的事件

web前端之锋利的jQuery四：jQuery中的事件

事件绑定：



bind(event,data,function)

第一个参数是事件类型，类型包括：blurfocusloadresizeunloadclickdblclickmousedownmouseupmousemovemouseovermouseoutmouseenterchangeselectsubmitkeydownkeypresskeyuperror等，当然也可以包含自定义名称（可以发现jQuery中对应的事件绑定类型比JavaScript中的少了一个“on”）

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数则是用来绑定的处理函数



（1）基本效果：

















$(document).ready(function(){

$(''#panelh5.head'').bind("click",function(){

$(this).next().show();

})

});





.content{

display:none;

}









什么是jQuery



jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。











（2）加强效果：

















$(document).ready(function(){

$(''#panelh5.head'').bind("click",function(){

if($(this).next().is(":visible")){//如果内容是显示的

$(this).next().hide();

}else{

$(this).next().show();

}



})

});





.content{

display:none;

}









什么是jQuery



jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。











“:visible”在可见性过滤选择器可以查询到



（3）改变事件绑定类型：

















$(document).ready(function(){

$(''#panelh5.head'').mouseover(function(){

$(this).next().show();

}).mouseout(function(){

$(this).next().hide();

})

});





.content{

display:none;

}









什么是jQuery



jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。









（4）合成事件：



1.hover()方法的语言结构：hover(enter,leave);鼠标经过移出的组合方法

















$(document).ready(function(){

$(''#panelh5.head'').hover(function(){

$(this).next().show();

},function(){

$(this).next().hide();

})

});





.content{

display:none;

}









什么是jQuery



jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。











2.toggle()方法结构：toggle(fn1,fn2,…,fnN):该方法用于模拟鼠标连续点击事件，第一次点击触发第一个事件，第二次点击触发第二个事件，依次循环。

















$(document).ready(function(){

$(''#panelh5.head'').toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

})



});





.content{

display:none;

}

.highlight{

background:#f30;

}









什么是jQuery



jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。











事件冒泡：

1.什么是冒泡：在页面上可以有多个事件，也可以一个元素响应多个事件。假设网页上有两个元素，其中一个元素完全嵌套在另一个元素中，并且绑定了click事件，同时在body元素上也绑定了click事件。

小例子：

















$(document).ready(function(){

//为span元素绑定click事件

$(''span'').bind("click",function(){

vartxt=$("#msg").html()+"

内层span元素被单击

";

$("#msg").html(txt);

});

//为div元素绑定click事件

$(''#content'').bind("click",function(){

vartxt=$("#msg").html()+"

外层div元素被单击

";

$("#msg").html(txt);

});

//为body元素绑定click事件

$(''body'').bind("click",function(){

vartxt=$("#msg").html()+"

body元素被单击

";

$("#msg").html(txt);

});



});









外层div元素

内层span元素

外层div元素











元素会按照事件的顺序依次向下冒泡。



事件冒泡引发的问题：

事件冒泡就可能会引起预料外的效果，上面小例子中，本来只想触发span里面的click事件，却全部触发了。所以，我们很有必要对时间的作用范围进行限制。



事件对象：

$(“element”).bind(“click”,function(event){//event:事件对象

});

这样的话，当单击element元素时，事件对象就被创建了，这是事件对象只有事件处理函数才能访问到。当事件处理函数结束之后，实践对象也就被销毁了



停止事件冒泡：

在jQuery中提供了stopPropagation()方法来停止事件冒泡



$("span").bind("click",function(){

vartxt=$("msg").html()+"

内层span元素被单击

"；

$("#msg").html(txt);

event.stopPropagation();//停止事件冒泡

});

阻止默认行为：

在jQuery中，提供了preventDefault()方法来阻止元素的默认行为

















$(document).ready(function(){

$("#sub").bind("click",function(event){

varusername=$("#username").val();

if(username==""){

$("#msg").html("

姓名不能为空

");

event.preventDefault();

//可以改写为returnfalse;

}

});



});









用户名：













事件捕获：

事件捕获与事件冒泡相反，是从外层到里层的，但是jQuery不支持，只有通过原声JavaScript来能进行。还有就是事件捕获并非所有浏览器都是支持的。



事件对象的属性：

1.event.type



$("a").click(function(event){

alert(event.type);//获取事件类型

returnfalse;//阻止链接跳转

});

2.event.preventDefault()方法

上面已经介绍了，适用于阻止元素默认行为



3.event.stopPropagation()方法：

上面已经介绍过了，用于停止事件冒泡



4.event.target

event.target的作用是获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。



$("a[href=''http://www.baidu.com'']").click(function(event){

vartg=event.target;//获取事件对象

alert(tg.href);

returnfalse;

});

5.event.relatedTarget

mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget在mouseover中相当于IE浏览器的event.fromElement,在mouseout中相当于IE浏览器的event.toElement,jQuery对其封装，使之能兼容各种浏览器。



6.event.pageX和event.pageY

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器使用page.x/page.y,在火狐浏览器中使用event.pageX和event.pageY.



$("a").click(function(event){

//获取鼠标当前相对于页面的坐标

alert("Currentmouseposition:"+event.pageX+","+event.pageY);

returnfalse;

});

7.event.which

该方法的作用是在鼠标点击事件中获取到鼠标的左中右键：



$("a").mousedown(function(e){

alert(e.which);

});

//获得键盘的按键



$("input").keyup(function(e){

alert(e.which);

});

8.event.metaKey

针对不同浏览器对键盘中的ctrl按键解释不同，jQuery进行封装，斌规定event.metaKey为键盘事件中获取ctrl按键



移除事件：

unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移出的函数

（1）如果没有参数，则删除所有绑定的事件

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件

（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

















$(document).ready(function(){

$("#delAll").click(function(){

$("#btn").unbind("click");

});

$("#btn").bind("click",function(){

$("#test").append("

我的绑定函数1

");

}).bind("click",function(){

$("#test").append("

我的绑定函数2

");

}).bind("click",function(){

$("#test").append("

我的绑定函数3

");

});



});







单击我

删除所有事件