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. PHP 中 call_user_func 函数 和 call_user_func_array 函数的区别

    PHP 中 call_user_func() 函数 和 call_user_func_array() 函数都是回调函数,在写接口的时候经常会用到,但是他们有什么区别呢? 它们的第一个参数都是被调用的回 ...

  2. python doc

    http://blog.51cto.com/lizhenliang/category16.html

  3. 第一个NDK工具：AddInputsSol

    工具名称:AddInputsSol 系统平台:Windows 7x64 软件平台:Nuke8.0v5x64 基本功能:分别获取AddInputsSol节点上游的framerange信息,点击Rende ...

  4. 在windows server上配置java jdk后，可能要些时间生效。

    特别是程序调用java写的bat脚本时.

  5. java锁在等待唤醒机制中作用

    等待的线程放在线程池wait().notify().notifyall()都使用在同步中,因为要对持有监视器(锁)的线程操作.所以要使用在同步中,因为只有同步才具有锁. 为什么这些操作的线程的方法要定 ...

  6. Java第06次实验提纲（集合）

    PTA与参考资料 重要参考-集合简述 题集:jmu-Java-06-集合 集合实验文件 第1次实验 1.1 ArrayListIntegerStack(课堂演示) 可演示:jdk中的javadoc文档 ...

  7. STL基础--算法（修改数据的算法）

    修改元素的算法 copy, move, transform, swap, fill, replace, remove vector<int> vec = {9,60,70,8,45,87, ...

  8. PAT 甲级 1006 Sign In and Sign Out (25)（25 分）

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  9. 服务网关zuul之一：入门介绍

    通过之前几篇Spring Cloud中几个核心组件的介绍,我们已经可以构建一个简略的(不够完善)微服务架构了.比如下图所示: 我们使用Spring Cloud Netflix中的Eureka实现了服务 ...

  10. chrome不好用

    (也是写于很久很久以前) 因为工作的某些原因,我本来想换Google chrome作为默认浏览器,真正用它的时候,才发现它一点都不好用,首先它很多网站不支持或显示不完整,比如新浪邮箱,打开新浪邮箱只显 ...