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操作）的更多相关文章

  1. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  2. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  3. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  4. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  5. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  6. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  7. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  8. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  9. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

随机推荐

  1. 开源Astro（SparkSQL On HBase）

    华为2015年7月20日在O'Reilly Open Source Convention (OSCON) 上宣布Spark SQL on HBase package正式开源.Spark SQL on ...

  2. mig_7series DDR控制器的配置

    mig_7series DDR控制器的配置

  3. Azure PowerShell (15) 批量导出Azure ASM/ARM VM信息

    <Windows Azure Platform 系列文章目录> 客户又提出新的需求,需要知道所有订阅下的虚拟机数量.运行情况等信息. 我花了点时间,写了一个PowerShell脚本,发布到 ...

  4. draftsight的热补丁

    http://www.piaodown.com/soft/134200.htm DraftSight HotFix 2017R3热修复补丁下载.DraftSight,一个非常好用的2D制图软件,由开发 ...

  5. Ubuntu 14.10 下Hadoop HttpFS 配置

    因为hadoop集群中需要配置一个图形化管理数据的截面,后来找到HUE,那么在配置HUE的过程中,发现需要配置httpfs,因为配置了httpfs,hue才能去操作hdfs中的数据. HttpFs能干 ...

  6. P2670扫雷

    链接 这是一个并不像搜索的题(其实它是个循环) 对于输入的a数组,一个一个遍历下来,如果a[i][j]是雷,那(i,j)周围8个点对应的位置雷数就+1(用b数组记录),注意不能超出边界,输出时,如果a ...

  7. 阿里云kubernetes遭入侵pubg进程占用cpu资源100%解决方法

    发现服务器CPU占用100%,通过top命令发现pubg -c config.json -t 2占用CPU资源,kill进程会自动启动.黑客入侵方式是kubernetes创建pod. Name: ku ...

  8. bundle adjustment 玩具程序

    结合 bundle adjustment原理(1) 和 Levenberg-Marquardt 的 MATLAB 代码 两篇博客的成果,调用MATLAB R2016a中 bundleAdjustmen ...

  9. IntelliJ IDEA2017 激活方法 最新的

    今天打开电脑,非常不幸,idea出问题了!!! 大部分人以前应该都是用的以下方法: 1. 到网站 http://idea.lanyus.com/ 获取注册码 2.填入下面的license server ...

  10. android 照片旋转并保存

    /** * 读取图片属性:旋转的角度 * @param path 图片绝对路径 * @return degree旋转的角度 */ public int readPictureDegree(String ...