jQuery的事件
事件冒泡处理
使用event.stopPropagation();阻止事件冒泡
冒泡事件也可以使用return false来处理
并且
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('.box button').click(function (event) {
alert('点击了button');
});
$('.box').click(function (event) {
alert('点击了box');
//事件冒泡阻止
event.stopPropagation()
})
})
/*事件冒泡，当一个div标签里面有一个button元素时
给div与button绑定点击事件，当点击button的时候也会触发div绑定的事件
jquery中只有事件冒泡阶段，没有puhuo
事件冒泡阶段：button->body->html->document
使用stopPropagation()可以处理事件冒泡这种情况
或者使用return false也可以处理事件冒泡，不过return false也会处理默认的js事件，比如说a标签的跳转
*/
</script>
jquery的事件
单双击事件
- 单击事件click()
- 双击事件dblclick()
一个按键同时绑定单击事件以及双击事件，两次单击中间的事件差是300毫秒，如果小于300毫秒，表示双击。假如小于300毫秒，也是表示调用了两次单击，一次双击。如果是单击
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//解决单双击事件冲突问题
var timeer = null;
$('button').click(function () {
//上来先把timer定时器清空了
clearTimeout(timeer);
//定时器，延时300毫秒
timeer=setTimeout(function () {
console.log('单击了');
},300)
});
$('button').dblclick(function () {
//触发了双击事件也把定时器清空了
clearTimeout(timeer);
console.log('双击了')
});
})
</script>
鼠标移入移出事件
mouseover()移入
mouseout()移出
mouseenter()移入
mouseleave()移出
合成事件
- hover()这个是jquery中的合成事件，合成了mouseenter与mouseleave事件
<head>
<meta charset="UTF-8">
<title>合成事件</title>
<style>
.shop-car{
position: relative;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.shop{
width: 400px;
height: 200px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<div class="shop-car">
<span>购物车</span>
<div class="shop"></div>
</div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('.shop-car').hover(function () {
$('.shop').stop().slideDown(500);
},function () {
$('.shop').stop().slideUp(500);
})
})
</script>
</body>
表单事件
- select()事件，文本选中的时候会调用
<body>
<form action="#">
<input type="text">
</form>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$('input[type=text]').select(function () {
console.log('内容被选中了')
})
</script>
</body>
- submit()事件
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//原声js的是onsubmit事件
$('from').submit(function (e) {
//阻止form表单的默认事件（submit触发form表单的action，往action发请求）
e.preventDefault();
//自定义去发请求
console.log('form被submit了')
})
})
</script>
鼠标的聚焦，失焦，键盘事件
- focus()获得焦点:输入框标示闪烁
- blur()失去焦点:输入框标示不闪烁
- 键盘按键keyup()
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$('input[type=text]').keyup(function (e) {
//e.keyCode是键盘的键码
//可以通过键盘键码使用流程控制判断进行控制
console.log(e.keyCode)
})
</script>
事件委托
事件委托：利用事件冒泡原理，需要动态往父级元素里面添加标签，并且让新添加的标签拥有与兄弟标签一样的事件，可以使用事件委托
<body>
<ul>
<li>111</li>
<li>222</li>
</ul>
<button>按钮</button>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//事件委托（如果是未来追加的元素，需要绑定事件，可以使用事件委托）
//on() 第一个属性事件名，第二个属性是选择器，第三个是fun
$('ul').on('click','li',function () {
alert($(this).text())
});
//未来动态的往ul中追加了li标签，如果只是ul>li标签绑定了click事件，那么可以考虑使用事件委托
$('button').click(function () {
$('ul').append('<li>喵</li>')
})
})
</script>
</body>
jQuery的事件的更多相关文章
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery css事件编程 位置 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- jQuery scroll事件实现监控滚动条分页示例（转）
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- jquery双击事件
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
随机推荐
- Guarding Bananas
Guarding Bananas Once there was a lazy monkey in a forest. But he loved banana too much. One day the ...
- 【转】EF 获取类的属性并排除特定属性（getType().GetProperties()）
当获取一个类型(class)的所有属性时,想排除指定属性,该如何操作? 比如:EF中一个实体类型UserEntity,通过反射获取这个类的属性时,想排除这个为映射的字段ID 使用以下方法即可! Pro ...
- AWVS和AppScan使用代理进行扫描教程
一.说明 扫描网站时,一是可能某些网站网络不能直接访问,二是可能不想曝露本机IP.这时要进行处理. 第一个方法是如果有vpn直接登vpn,vpn的话由于是直接修改操作系统层次的网络,扫描器不需要额外做 ...
- ffmpeg+libmp3lame库源码安装教程（CentOS）
lame--libmp3lame的安装包,支持MP3编码:yasm--NASM的重写,用于编译ffmpeg. 1.下载 ffmpeg下载链接:http://ffmpeg.org/download.ht ...
- POJ 2243 Knight Moves(BFS)
POJ 2243 Knight Moves A friend of you is doing research on the Traveling Knight Problem (TKP) where ...
- asp.net中javascript与后台c#交互
asp.net中javascript与后台c#交互 作者:熊猫大叔 字体:[增加 减小] 类型:转载 时间:2015-10-23我要评论,出处:http://www.jb51.net/article/ ...
- Spring Boot + Spring Cloud 实现权限管理系统 （集成 Shiro 框架）
Apache Shiro 优势特点 它是一个功能强大.灵活的,优秀开源的安全框架. 它可以处理身份验证.授权.企业会话管理和加密. 它易于使用和理解,相比Spring Security入门门槛低. 主 ...
- spoj220
题解: 后缀数组 把所有串连接起来 二分答案 代码: #include<cstdio> #include<cstring> #include<algorithm> ...
- ppt点击文字出现图片,再次点击消失
实现效果:在PPT一个页面的任意位置,单击左键,出现图片:在图片上,单击左键,图片消失 实现思路:给图片做两个动画,一个进入,文字作触发器,另一个退出,图片本身为触发器. 实现方法: 1.选中图片…… ...
- Linux3.10.0块IO子系统流程（3）-- SCSI策略例程
很长时间以来,Linux块设备使用了一种称为“蓄流/泄流”(plugging/unplugging)的技术来改进吞吐率.简单而言,这种工作方式类似浴盆排水系统的塞子.当IO被提交时,它被储存在一个队列 ...