事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡：
click mouseenter 等事件没有绑定 也会触发，只是触发后没有任何结果
子元素触发事件后，会把触发事件传递给父元素，那么父元素也会被触发。
不管有没有绑定事件，都会触发事件，只是没有结果，事件冒泡传递还是会发生
系统自动产生的event事件对象
function传的第一个参数就是event事件对象
event.stopPropagation(); // 阻止事件冒泡
event.preventDefault() // 阻止默认行为 比如submit阻止表单提交 // 上面两个阻止 可以合并写成
return false;
事件委托：
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
基本实现：
$(function(){
var $li = $('.list li');
var $list = $('.list');
// 多次绑定，性能堪忧
// $li.click(function(){
// $(this).css({'background':'red'});
// })
// 事件委托方式 delegate(发生事件的元素, 事件属性, 匿名函数)
$list.delegate('li','click',function(){
$(this).css({'background':'red'});
})
})
上述代码不能很好的体现事件委托的优势，下面引入Dom操作 综合体现事件委托的优势。
Dom操作：
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div01 = $('#div01');
var $p01 = $('#p01');
var $h01 = $('#h01');
var $p02 = $('#p02'); // 当前元素里面的后面要放另外一个元素
// $div01.append($p01); // 当前元素要放到另外一个元素的里面的后面
$p01.appendTo($div01); // 当前元素里面的前面要放另外一个元素
// $div01.prepend($h01); // 当前元素要放到另外一个元素里面的前面
$h01.prependTo($div01); // 当前元素外面的后面要放另外一个元素
// $div01.after($p02); // 当前元素要放到另外一个元素的外面的后面
$p02.insertAfter($div01); // 创建一个空div标签
var $newdiv01 = $('<div>'); // 创建一个有内容的div标签
var $newdiv02 = $('<div>新创建的第二个div</div>'); // 当前元素外面的前面要放另外一个元素
$div01.before( $newdiv01 ); // 当前元素要放到另外一个元素的外面的前面
$newdiv02.insertBefore($div01); // 删除标签
$newdiv01.remove(); $p01.remove(); }) </script>
</head>
<body>
<p id="p01">这是div01外面的p标签</p>
<h2 id="h01">这是div01外面的h2标题</h2>
<p id="p02">这是div01外面的第二个p标签</p>
<div id="div01">
<h3>这是div01里面的h3</h3>
<p>这是div01里面的p标签</p>
</div>
</body>
</html>
下面这个例子能体现事件委托的优势
$(function(){
var $txt = $('#txt1');
var $btn = $('#btn1');
var $list = $('#list');
// 增加计划
$btn.click(function(){
var sVal = $txt.val();
// 清空输入框
$txt.val('');
// 判断输入框是否为空
if(sVal==''){
alert('请输入内容！');
return;
}
// 创建一个包含计划内容的li标签
var $li = $('<li><span>'+ sVal +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
$li.appendTo($list);
/*
var $del = $li.find('.del');
$del.click(function(){
$(this).parent().remove();
});
*/
})
// 删除功能：
/*
var $del = $('.del');
$del.click(function(){
$(this).parent().remove();
})
*/
// 事件委托
$list.delegate('a','click',function(){
if($(this).hasClass('del')){
$(this).parent().remove();
}else if($(this).hasClass('up')){
if($(this).parent().prev().length==0){
alert('到顶了已经');
return false;
}
$(this).parent().insertBefore($(this).parent().prev());
}else{
if($(this).parent().next().length==0){
alert('到底了已经');
return false;
}
$(this).parent().insertAfter($(this).parent().next());
}
})
})
事件冒泡及事件委托的理解（JQuery Dom操作）的更多相关文章
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- js事件捕获，事件冒泡，事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
随机推荐
- Spring Boot 监控与管理
在微服务架构中,我们将原本庞大的单体系统拆分为多个提供不同服务的应用,虽然,各个应用的内部逻辑因分解而简化,但由于部署的应用数量成倍增长,使得系统的维护复杂度大大提升,为了让运维系统能够获取各个为服务 ...
- swiper4 一个页面多个轮播
<div class="swiper-container"> <div class="swiper-wrapper"> <div ...
- MySQL5.7(5.6)GTID环境下恢复从库思路方法(转发）
要讨论如何恢复从库,我们得先来了解如下一些概念: GTID_EXECUTED:它是一组包含已经记录在二进制日志文件中的事务集合 GTID_PURGED:它是一组包含已经从二进制日志删除掉的事务集合. ...
- Reporting Services报表常用的URL参数
http://blog.sina.com.cn/s/blog_5ef7acf5010118a5.html Reporting Services报表常用的URL参数 (2012-03-01 20:57: ...
- Mysql 性能优化6【重要】 索引优化
b tree索引 myisam 是通过物理位置来查找引用行的 innodb 是通过主键来查找引用行的 索引优化策略 b-tree索引对数据长度有限制,所以text等比较长的列可以建立前缀索引 btre ...
- GitHub版本控制入门（新手学习）
要使用GitHub功能,首先要登陆官方网站https://github.com,注册GitHub账号. 在浏览器中的操作: 新建一个仓库.一个项目一旦被Git控制了版本历史,在GitHub上就有另外一 ...
- WPF系列学习
1:WPF最小化到系统托盘 2:WPF程序单例运行 3:WPF中三种异常捕获:UI线程异常.非UI线程异常.Task线程异常 在窗体放一个按钮在单击事件执行如下代码来模拟. private void ...
- 记一次包含iframe的需要滚动的元素不能滚动到底部的问题
一个包含上头部.下部模块(包含左右两边模块:侧边栏.内容区域)的页面 前提条件,内容区域: 1.元素高度需要自适应屏幕高度 2.里面内容足够长时,可以滚动 3.包含了一个iframe嵌入的内容很长的页 ...
- 网页如何检查浏览器是否安装flash插件
如果页面需要加载flash插件并且需要提示用户flash下载,这里有个官方很好的js文件只要引用就可以实现 //v1.7 // Flash Player Version Detection // De ...
- java1.8新特性（optional 使用）
经常在程序中出现 java.lang.NullPointerException 为了避免 报错,总是要进行一些 是否为null 的if else 判断 ,1.8 可以使用optional 类 来简 ...