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)什么是事件起泡 首先你要明 ...
随机推荐
- moment.js 常用（几天前、相差几天、自然周、自然月）
let pickDate = moment(this.searchForm.date); let firstDay = pickDate.day(0).format('YYYYMMDD');//上周天 ...
- Python3组播通信编程实现教程（发送者+接收者）
一.说明 1.1 标准组播解释 通信分为单播.多播(即组播).广播三种方式 单播指发送者发送之后,IP数据包被路由器发往目的IP指定的唯一一台设备的通信形式,比如你现在与web服务器通信就是单播形式 ...
- EventBus简单封装
前言 以前每个页面与每个页面业务逻辑传递让你不知所措,一个又一个接口回调,让你晕头转向,一个又一个参数让你混乱不堪.EventBus一个耦合度低的让你害怕的框架. 什么是EventBus EventB ...
- Spring事务的开启方式
1.通过注解方式@Transactional @Transactional(rollbackForClassName = { "Exception", "RuntimeE ...
- Java Web(十一) 文件上传与下载
文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将 ...
- react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...
- jquery 共用函数
ready()方法 $(doxument).ready(fucntion(){ }) $().ready(function(){ }) $(function(){ }) 当文档加载后激活函数: ...
- java 数据溢出和编译错误的差别
int a=100000000000;编译错误,超出int范围 int a=2100000000; int b=a*12020200;数据溢出,a并未溢出,但b在通过a计算后的数据溢出 long e= ...
- Tomcat错误：getOutputStream() has already been called for this response
使用weblogic部署时,没有报错.客户现场使用tomcat后报错. 在tomcat下jsp中出现此错误一般都是在jsp中使用了输出流(如输出图片验证码,文件下载等),没有妥善处理好的原因.具体的原 ...
- [Codeforces797F]Mice and Holes
Problem n个老鼠,m个洞,告诉你他们的一维坐标和m个洞的容量限制,问最小总距离. Solution 用dp[i][j]表示前i个洞,进了前j个老鼠的最小代价 dp[i][j]=min(dp[i ...