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)什么是事件起泡 首先你要明 ...
随机推荐
- [codechef July Challenge 2017] IPC Trainers
IPCTRAIN: 训练营教练题目描述本次印度编程训练营(Indian Programming Camp,IPC)共请到了 N 名教练.训练营的日程安排有 M 天,每天最多上一节课.第 i 名教练在第 ...
- C++三大特性 封装 继承 多态
C++ 三大特性 封装,继承,多态 封装 定义:封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成类,其中数据和函数都是类的成员,目的在于将对 ...
- html 中一些不常见的标签
标签 描述 <b> 定义粗体文本. <big> 定义大号字. <em> 定义着重文字. <i> 定义斜体字. <small> 定义小号字. ...
- ActiveMQ broker 集群, 静态发现和动态发现
下载 activemq 压缩包解压后,conf 目录下有各种示例配置文件,红线标出的是静态发现和动态发现的配置. 1. 静态配置 启动3个 broker,端口分别为61616,61618,61620, ...
- OpenSSH隐藏版本号教程
1.查看当前OpenSSH版本号 sshd -v #sshd并没有-v选项,这并不是重点重点是这样能曝出版本号 2.查看sshd位置 which sshd 3.备份sshd cp /usr/sbin/ ...
- 运维相关 docker
- 【转】Netty之解决TCP粘包拆包(自定义协议)
1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...
- Redis分布式锁实例
maven依赖 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</ ...
- python ctrl+c
#!/usr/bin/env pythonimport signalimport sysimport osdef signal_handler(signal, frame): print('You p ...
- MySQL(一) 初识MySQL
数据库基础 数据库是由一批数据构成的有序的集合,这些数据被存放在结构化的数据表里.数据表之间相互联系,反映了客观事物间的本质联系.数据库系统提供对数据的安全控制和完整性控制. 什么是数据库 数据库的发 ...