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)什么是事件起泡 首先你要明 ...
随机推荐
- springcloud之eureka配置——eureka.instance
1.在springcloud中服务的 Instance ID 默认值是: ${spring.cloud.client.hostname}:${spring.application.name}:${sp ...
- H5 页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wi ...
- EvalAI使用——类似kaggle的开源平台，不过没有kernel fork功能，比较蛋疼
官方的代码 https://github.com/Cloud-CV/EvalAI 我一直没法成功import yaml配置举办比赛(create a challenge on EvalAI 使用htt ...
- Python学习之路【第一篇】-Python简介和基础入门
1.Python简介 1.1 Python是什么 相信混迹IT界的很多朋友都知道,Python是近年来最火的一个热点,没有之一.从性质上来讲它和我们熟知的C.java.php等没有什么本质的区别,也是 ...
- nodejs 修改端口号 process.env.PORT（window环境下）
各个环境下,nodejs设置process.env.PORT的值的命令,如下1.linux环境下: PORT= node app.js 使用上面命令每次都需要重新设置,如果想设置一次永久生效,使用下面 ...
- Linux网卡性能查看（CentOS）
一.ethtool查看网卡带宽 ethtool eth0 #eth0为网卡名,使用ifconfig查看当前使用的网卡 Speed表示网卡带宽,Duplex表示工作模式,Supported link m ...
- Linux CPU信息和使用情况查看（CentOS）
一.CPU信息查看 cat /proc/cpuinfo| grep "physical id"| sort -u | wc -l #查看是物理CPU个数,-u和uniq都是去重作用 ...
- sudo执行命令允许教程
1.说明 在Ubuntu中我们可能经常使用sudo执行一些高权限命令:但在CentOS中默认是不允许普通用户sudo的,如同以下情型 [ls@ls bin]$ sudo ifconfig [sudo] ...
- ubuntu 双硬盘挂载 windows分区自动挂载
sudo fdisk -l 查看硬盘情况 1:新建一个目录,例:old 2:mount /dev/sdb1 old 3:cd old 4:ls (就可以看到新硬盘的内容了) 取消挂载:umoun ...
- web前端开发面试题（答案）
1.xhtml和html有什么区别? HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须 ...