jquery——事件冒泡、事件委托
一个事件冒泡的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('body').click(function () {
alert(4);
}); $('.grandfather').click(function () {
alert(3);
});
$('.father').click(function () {
alert(2);
});
$('.son').click(function () {
alert(1);
});
})
</script>
<style type="text/css">
.grandfather{
width:300px;
height:300px;
background-color: gold;
position: relative;
}
.father{
width:200px;
height:200px;
background-color: hotpink;
}
.son{
width:100px;
height:100px;
background-color: chartreuse;
position: absolute;
left:0;
top:400px;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
事件冒泡有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止
$('body').click(function (event) {
alert(4);
event.stopPROpagation();
});
阻止默认行为：（阻止右键菜单）
$(document).contextmenu(function(event){
event.preventDefault();
})
合并阻止操作：
实际开发中一般把阻止冒泡和阻止默认行为合并起来写
return false；
eg：（弹框--阻止冒泡）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#pop').show();
return false;
});
$('#shutoff').click(function () {
$('#pop').hide();
});
$(document).click(function (event) {
$('#pop').hide();
});
$('.pop').click(function () {
return false;
})
})
</script>
<style type="text/css">
.pop_con{
/*暂时隐藏*/
display: none;
}
.pop{
width: 300px;
height:200px;
background-color: #fff;
border:1px solid #000; /*使框居中*/
position: fixed;
left:50%;
top:50%;
margin-left:-150px;
margin-top: -100px;
/*让弹窗覆盖在mask上面*/
z-index:9999;
}
.mask{
position: fixed;
width:100%;
height: 100%;
background-color: #000;
left:0;
top:0;
/*设置透明度*/
opacity:0.3;
/*ie兼容的透明度*/
filter:alpha(opacity=0.3);
/*让弹窗覆盖在mask上面*/
z-index:9990;
}
</style>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p>
<input type="button" name="" value="弹出" id="btn">
<!--自制弹框-->
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutoff">关闭</a>
<input type="text" name="">
</div>
<div class="mask">mask</div>
</div>
</body>
</html>
事件委托：利用事件冒泡原理把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也拥有相同的操作。
<script type="text/javascript">
<!--事件委托写法-->
$(function () {
$('.list').delegate('li','click',function () {
alert($(this).html());
//取消委托
$('.list').undelegate();
}); }) </script>
jquery——事件冒泡、事件委托的更多相关文章
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框
上周遇到两个坑. 一是jQuery的on方法 事件冒泡,在iOS中有问题. $("body").on("click",".contentup" ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- jquery的冒泡事件event.stopPropagation()
js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的冒泡应该 说是交换更加准确:js ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
随机推荐
- encodeURI,encodeURIComponent编码
encodeURI().encodeURIComponent().decodeURI().decodeURIComponent() URL编码 Global对象的encodeURI()和encodeU ...
- bzoj 2178 圆的面积并 —— 辛普森积分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2178 先看到这篇博客:https://www.cnblogs.com/heisenberg- ...
- mysql5.5主从同步复制配置
在上篇文章<烂泥:学习mysql数据库主从同步复制原理>中,我们介绍了有关mysql主从复制的基本原理.在这篇文章中,我们来实际测试下mysql5.5的主从同步复制功能. 注意mysql5 ...
- Select\Poll\Epoll异步IO与事件驱动
事件驱动与异步IO 事件驱动编程是一种编程规范,这里程序的执行流由外部事件来规定.它的特点是包含一个事件循环,但外部事件发生时使用回调机制来触发响应的处理.另外两种常见的编程规范是(单线程)同步以及多 ...
- 优化Java堆大小的5个技巧
本文作者Pierre是一名有10多年经验的高级系统架构师,他的主要专业领域是Java EE.中间件和JVM技术.根据他多年的工作实践经验,他发现许多性能问题都是由Java堆容量不足和调优引起的.下面他 ...
- JSP介绍（4）--- JSP 过滤器
过滤器是可用于 Servlet 编程的 Java 类,可以实现以下目的: 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发送回客户端之前,处理这些响应. 过滤器通过 Web 部署描述符 ...
- shell脚本备份系统的方法
linux自动备份shell(使用全备份,增量备份策略) 在cron里设置,每周日晚12点执行(每周日全备份,其余时间增量备份)#vi backup.sh #!/bin/bash # definewe ...
- [51nod1138]正整数分解为几个连续自然数之和
解题关键:注意为什么上界是$\sqrt {2n} $ 因为函数是关于m的递减函数,而结果必须为正整数 $a = \frac{{2n + m - {m^2}}}{{2m}} = \frac{n}{m} ...
- 基本算法思想之穷举法（C++语言描述）
穷举算法(Exhaustive Attack method)是最简单的一种算法,其依赖于计算机的强大计算能力来穷尽每一种可能性,从而达到求解问题的目的.穷举算法效率不高,但是适应于一些没有规律可循的场 ...
- Linux 静态库(.a)转换为动态库(.so)
Linux 静态库转换为动态库 参考 http://blog.csdn.net/moxuansheng/article/details/5812410 首先将.a文件转为.so文件是可以实现的 原因是 ...