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. 【java】for循环嵌套

    循环嵌套:外循环控制行数,内循环控制每一行的列数,也就是每一行的元素个数 需求:打印出9*9的乘法表 class Demo { public static void main(String[] arg ...

  2. RTTI D7

    RTTI需要引用单元TypeInfo 至于RTTI的数据结构,大家可以参考TypeInfo单元的代码 看例子,先为大家介绍一下根据字符串找到属性,并且对其修改的例子 根据属性字符串找到属性,并修改属性 ...

  3. 饿了么移动APP的架构演进

    1MVC 我们常说,脱离业务谈架构就是纯粹的耍流氓.饿了么移动APP的发展也是其业务发展的一面镜子. 在饿了么业务发展的早期,移动APP经历了从无到有的阶段.为了快速上线抢占市场,传统移动APP开发的 ...

  4. ALGO-12_蓝桥杯_算法训练_幂方分解(递归)

    问题描述 任何一个正整数都可以用2的幂次方表示.例如: =++ 同时约定方次用括号来表示,即ab 可表示为a(b). 由此可知,137可表示为: ()+()+() 进一步:= ++ (21用2表示) ...

  5. MATLAB在三维坐标中显示图片 并 使得图片部分透明

    要画一个光路图,本来可以用proe,但是鼠标不好用,有些操作也忘了,用MATLAB画了个.下面是用到的图片. 但是三维坐标中显示彩色图片的目标没有搞定,做了个灰度图,然后用仿射程序将彩色图片贴到了二维 ...

  6. go中的make和new的区别

    适用范围:make 只能创建内建类型(slice map channel), new 则是可以对所有类型进行内存分配 返回值: new 返回指针, make 返回引用 填充值: new 填充零值, m ...

  7. Java项目配置redis

    成功配置redis之后,便来学习使用redis.首先了解下redis的数据类型. Redis的数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...

  8. [UE4]蓝图比C++慢10倍，是吗？

    首先,蓝图肯定是比C++慢. 任何脚本语言(需要解释执行的语言),和C++相比可能达到十倍甚至百倍的差距.比如Java.Python.Lua,JS. 脚本语言是运行在虚拟机上的,所以它们比起直接运行的 ...

  9. 通过注解实现一个简易的Spring mvc框架

    1.首先我们来搭建架构,就建一个普通的javaweb项目就OK了,具体目录如下: 对于小白来说可以细看后面web.xml的配置,对javaweb有点研究可以忽略而过后面的web.xml配置. 2.先上 ...

  10. PHP正则配合写配置文件导致Getshell

    PHP正则配合写配置文件导致Getshell,偶然间看到的一个题目, p 牛的小密圈的一个问题. 分析一下,漏洞代码: index.php <?php $str=addslashes($_GET ...