web前端之锋利的jQuery四：jQuery中的事件
2016-12-06 11:34
531 查看
web前端之锋利的jQuery四：jQuery中的事件
加载DOM：
执行时机：$(document).ready(function(){}); 详情解释
事件绑定：
bind(event,data,function)
第一个参数是事件类型，类型包括：blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit keydown keypress keyup error等，当然也可以包含自定义名称（可以发现jQuery中对应的事件绑定类型比JavaScript中的少了一个“on”）
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数
（1）基本效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').bind("click",function(){
$(this).next().show();
})
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>（2）加强效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').bind("click",function(){
if($(this).next().is(":visible")){//如果内容是显示的
$(this).next().hide();
}else{
$(this).next().show();
}
})
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>“:visible”在可见性过滤选择器可以查询到，详情查看
（3）改变事件绑定类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>（4）合成事件：
1.hover()方法的语言结构：hover(enter,leave);鼠标经过移出的组合方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>2.toggle()方法结构：toggle(fn1,fn2,…,fnN):该方法用于模拟鼠标连续点击事件，第一次点击触发第一个事件，第二次点击触发第二个事件，依次循环。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
})
});
</script>
<style type="text/css">
.content{
display:none;
}
.highlight{
background: #f30;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>事件冒泡：
1.什么是冒泡：在页面上可以有多个事件，也可以一个元素响应多个事件。假设网页上有两个元素，其中一个元素完全嵌套在另一个元素中，并且绑定了click事件，同时在body元素上也绑定了click事件。
小例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//为span元素绑定click事件
$('span').bind("click",function(){
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
});
//为div元素绑定click事件
$('#content').bind("click",function(){
var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
$("#msg").html(txt);
});
//为body元素绑定click事件
$('body').bind("click",function(){
var txt=$("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(txt);
});
});
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
</html>元素会按照事件的顺序依次向下冒泡。
事件冒泡引发的问题：
事件冒泡就可能会引起预料外的效果，上面小例子中，本来只想触发span里面的click事件，却全部触发了。所以，我们很有必要对时间的作用范围进行限制。
事件对象：
$(“element”).bind(“click”,function(event){ //event:事件对象
});
这样的话，当单击element元素时，事件对象就被创建了，这是事件对象只有事件处理函数才能访问到。当事件处理函数结束之后，实践对象也就被销毁了
停止事件冒泡：
在jQuery中提供了stopPropagation()方法来停止事件冒泡
$("span").bind("click",function(){
var txt=$("msg").html()+"<p>内层span元素被单击</p>"；
$("#msg").html(txt);
event.stopPropagation();//停止事件冒泡
});阻止默认行为：
在jQuery中，提供了preventDefault()方法来阻止元素的默认行为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sub").bind("click",function(event){
var username=$("#username").val();
if(username==""){
$("#msg").html("<p>姓名不能为空</p>");
event.preventDefault();
//可以改写为 return false;
}
});
});
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username">
<input type="submit" value="提交" id="sub">
</form>
<div id="msg"></div>
</body>
</html>事件捕获：
事件捕获与事件冒泡相反，是从外层到里层的，但是jQuery不支持，只有通过原声JavaScript来能进行。还有就是事件捕获并非所有浏览器都是支持的。
事件对象的属性：
1.event.type
$("a").click(function(event){
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});2.event.preventDefault()方法
上面已经介绍了，适用于阻止元素默认行为
3.event.stopPropagation()方法：
上面已经介绍过了，用于停止事件冒泡
4.event.target
event.target的作用是获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。
$("a[href='http://www.baidu.com']").click(function(event){
var tg=event.target;//获取事件对象
alert(tg.href);
return false;
});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("Current mouse position: "+event.pageX+","+event.pageY);
return false;
});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个参数，则只有这个特定的事件处理函数会被删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>移除事件</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#delAll").click(function(){
$("#btn").unbind("click");
});
$("#btn").bind("click",function(){
$("#test").append("<p>我的绑定函数1</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数2</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数3</p>");
});
});
</script>
</head>
<body>
<button id="btn">单击我</button>
<button id="delAll">删除所有事件</button>
<div id="test"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端之锋利的jQuery三：jQuery中的DOM操作
- web前端之锋利的jQuery九：jQuery插件的使用（模态窗口、cookie、UI）
- web前端之锋利的jQuery五：jQuery中的动画
- web前端之锋利的jQuery七：jQuery表格应用、其他应用
- web前端之锋利的jQuery十一：综合开发，编写购物网首页
- 【web前端】jQuery – 鼠标经过(hover)事件的延时处理
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
- web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
- web前端之锋利的jQuery十：编写jQuery插件
- web前端之锋利的jQuery六：jQuery对表单的操作
- web前端之锋利的jQuery一：认识jQuery
- web前端，jquery实现瀑布流总结6，jQuery 事件 - scroll() 方法 滚动
- Sublime text 2编辑器（本次用于backbone+jQuery_Mobile+html5的web前端开发）
- 【web前端】jQuery powerFloat万能浮动层下拉层插件
- 锋利的jQuery第四章:jQuery中的事件和动画
- Web编程前端之6：如何使jQuery动画效果与程序顺序执行
- 精选推荐 23 款基于jquery的web前端网页特效
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
- 【锋利的JQuery】0x04 JQuery中的事件与动画
- 分享下载 23 款简单常用的web前端jquery网页特效