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> ...
随机推荐
- HDU4699：Editor
浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=46 ...
- virtual judge(专题一 简单搜索 C)
Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...
- 一. kafka 入门
一.基本概念 Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因素. K ...
- spring 学习 requestMapping
1: @RequestMapping:处理请求地址映射的请求,有6个属性? ` value: URL 地址 method: GET/POST/PUT/DELETE co ...
- 四种生成和解析XML文档的方法介绍
解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 1.DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方 ...
- AutoMapper学习笔记
进入公司后学习到的东西,之前记录在github上 现在搬运过来 AutoMapperDemo 需要安装两个包 AutoMapper AutoMapper.Extensions.Microsoft.De ...
- 设置win7资源管理器启动时的默认位置-windows-操作系统-网页教学网
设置win7资源管理器启动时的默认位置-windows-操作系统-网页教学网 如何设置win7资源管理器启动时的默认位置?我不太习惯 Win 7 的资源管理器默认总是打开库,我还是喜欢资源管理器打开树 ...
- 关于audio.js的研究
——杂言:audio.js结合使用html5的audio组件实现了音频的原位播放功能.虽然项目里已经使用一段时间了,不过我是最近才开始有所接触,惭愧.个人见解若有不对,请帮忙纠正,谢谢. 官方相关链接 ...
- 使用JFileChooser打开文件
-----------------siwuxie095 工程名:TestFileChooser 包名:com.siwuxie095.fi ...
- VS编译器中设置 输出窗口 只显示error，不显示warning 要如何配置
VS编译器中设置 输出窗口 只显示error,不显示warning 要如何配置 在编译大型项目的时候,总是VS编译器的输出窗口总是会出现一堆warning警告,要想在里面找到error错误,要使用鼠标 ...