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> ...
随机推荐
- gulp之压缩图片
//先全局安装gulp:npm install -g gulp //然后在项目根目录中安装gulp依赖:npm install --save-dev gulp //http://www.gulpjs. ...
- BZOJ1720：[Usaco2006 Jan]Corral the Cows 奶牛围栏
我对二分的理解:https://www.cnblogs.com/AKMer/p/9737477.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...
- 洛谷 P4547 & bzoj 5006 随机二分图 —— 状压DP+期望
题目:https://www.luogu.org/problemnew/show/P4547 https://www.lydsy.com/JudgeOnline/problem.php?id=5006 ...
- bzoj 1941 Hide and Seek —— K-D树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1941 曼哈顿最小距离估价:max( 0, t[x].mn[i] - v.p[i] ) + m ...
- HeartBleed bug
前两年的一个严重漏洞,影响很大.出现在openssl 1.0.1和1.0.2 beta(包含1.0.1f和1.0.2beta1).利用了TLS的heartbeat. 简单的说,该漏洞被归为缓冲过度读取 ...
- 江苏省大学生程序设计竞赛（JSCPC）赛后感
仔细的算了一下,这是我第6次参加与acm有关的比赛了,每一次的经历,在我看来都是一次对自己能力的认识与评估,身边学计算机专业的同龄人对这项比赛的热爱,专注,勇气以及所获得的成就让要好好努力,更要加倍付 ...
- AD9 如何画4层pcb板
新建的PCB文件默认的是2层板,教你怎么设置4层甚至更多层板. 在工具栏点击Design-->Layer Stack Manager.进入之后显示的是两层板,添加为4层板,一般是先点top la ...
- kvm ip查看
1.virsh --list(查看有哪些服务器) 2.virsh dumpxml 虚拟机名称 查看服务器对应的mac地址 3.然后再宿主机上arp -a 查看对应的mac地址对应的ip
- Struts2 配置项
基础Constants struts.devMode 可选值true,false (默认false),在开发模式下,struts2的动态重新加载配置和资源文件的功能会默认生效.同时开发模式下也会提供 ...
- linux 安装输入法
简述 Ubuntu16.04安装完后,和12.04以及14.04都不一样,并没有中文输入功能.于是搜索一些安装中文输入法的方法. 开始安装了ibus pinyin输入法,但是系统重启之后发现有些时候不 ...