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> ...
随机推荐
- Python命令模块argparse学习笔记(三)
参数组 ArgumentParser.add_argument_group(title=None, description=None) 默认情况下,当显示帮助消息时,ArgumentParser将命令 ...
- 第三波精品Android源码袭来！免费下载
今天又汇总了一些源码供大家免费下载学习! 1.Android实现NewQuickAction快捷菜单NewQuickAction能根据点击事件发生的坐标来显示一个快捷菜单,比如点击位置在靠近底部,则弹 ...
- linux日常管理-查看系统负载
查看系统的负载常用命令w 16:32::15是系统时间 up 16 min 是开机使用时间 1 user 是登录的用户数 重要 load average:0.00 0.00 0.00 负载分别表示1分 ...
- Maven jenkins +Jmeter自动化测试
Maven jenkins +Jmeter自动化测试 1. Jenkins中集成jmeter-maven插件 http://my.oschina.net/u/1377774/blog/168969 2 ...
- Sequence Models 笔记（二）
2 Natural Language Processing & Word Embeddings 2.1 Word Representation(单词表达) vocabulary,每个单词可以使 ...
- mysql nginx redis 配置文件
https://github.com/superhj1987/awesome-config
- 使用Paramiko的问题
在使用Paramiko远程登录的时候,会报sudo: sorry, you must have a tty to run sudo 切换到root用户,使用visudo命令,然后就会打开一个文本,在文 ...
- 在Ionic Framework 退出APP
使用以下代码: ionic.Platform.exitApp(); 在控制器中增加: $scope.Quit = function(){ ionic.Platform.exitApp(); }
- 洛谷P3146 [USACO16OPEN]248
P3146 [USACO16OPEN]248 题目描述 Bessie likes downloading games to play on her cell phone, even though sh ...
- [sql] view plain copy
[sql] view plain copy CREATE TABLE SYS_USER ( USER_CODE VARCHAR( 36 ) NOT NULL, LOGIN_NAME VARCHAR( ...