首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJuly 22, 2017

一、事件冒泡定义

事件冒泡是指在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，甚至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层级的最顶层，即document对象（有些浏览器是window）.。

二、事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

三、阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation（）来阻止

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

四、阻止默认行为

如：阻止右键菜单

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

五、合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法如下：

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

六、事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

1、一般绑定事件的写法：

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

2、事件委托的写法：（实际开发中，如果是对大量子元素进行操作时，应该用事件委托的方式，提高性能）

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

七、取消事件委托

用法：$("委托对象").undelegate()

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

八、jQuery元素节点操作1、创建节点

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

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

2、插入节点

a、append()和appendTo() 在现存元素的内部，从后面插入元素

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

输出结果为：

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

　　b、prepend()和prependTo() 在现存元素的内部，从前面插入元素

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

　　输出结果：

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

c、after()和insertAfter() 在现存元素的外部，从后面插入元素

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

输出结果：

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

d、before()和insertBefore() 在现存元素的外部，从前面插入元素

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

输出结果：

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

3、删除节点

$(selector).remove();

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

4、to do list（计划列表）实例

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="../css/reset.css" rel="external nofollow" rel="external nofollow" >
 <style>
  .con{
   width:360px;
   margin:30px auto;
  }
  .con > h3{
   margin-bottom:15px;
  }
  .con input{
   width:290px;
   height:30px;
  }
  .con button{
   width:60px;
   height:34px;
   border:0;
  }
  .con ul li{
   display: flex;
   margin-top:15px;
   border-bottom:1px solid #ccc;
   justify-content: space-between;
  }
  .con li p{
   /*清除a元素之间的间隙*/
   font-size:0;
  }
  .con li p a{
   color:#1b5fdd;
   font-size:16px;
   margin-left:10px;
  }
  /*弹框样式*/
  .pop_con{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background:#000;
   display: none;
  }
  .pop{
   width:400px;
   height:220px;
   position:absolute;
   left:50%;
   margin-left:-200px;
   top:50%;
   margin-top:-150px;
   background:#fff;
  }
  .pop .pop_title{
   padding:15px;
   display: flex;
   justify-content: space-between;
  }
  .pop .pop_title a{
   width:36px;
   height:36px;
   line-height:36px;
   border-radius:50%;
   background:#c7254e;
   color:#fff;
   text-align: center;
   position:absolute;
   top:-18px;
   right:-18px;
   transition: all 1s ease;
  }
  .pop_title h3{
   letter-spacing: 2px;
   font-weight: normal;
  }
  .pop_title a:hover{
   transform: rotate(360deg);
  }
  .pop_message{
   height:110px;
   line-height:110px;
   text-align: center;
  }
  .pop_confirm{
   height:36px;
   text-align: center;
  }
  .pop_confirm button{
   height:36px;
   line-height: 36px;
   padding:0 15px;
   background: #c7254e;
   border:none;
   color:#fff;
   outline: none;
  }
 </style>
 <script src="../js/jquery-1.12.4.min.js"></script>
 <script>
  $(function(){
   //声明变量
   var $input = $("#input");
   $(".pop").click(function(){
    return false;
   });
   $(".pop_confirm").click(function(){
    $(".pop_con").fadeOut();
   });
   $(".close").click(function(){
    $(".pop_con").fadeOut();
   });
   $(".pop_con").click(function(){
    $(this).fadeOut();
   });
   //点击增加按钮，新增元素
   $("#add").click(function(){
    var $inputVal = $input.val();
    //如果输入值为空，出现弹框提示
    if($inputVal == ""){
     $(".pop_con").fadeIn();
     return false
    }
    $input.val("");
    var $li = $("<li><h3>"+$inputVal+"</h3><p><a class='delete' href='javascript:void(0);'>删除</a><a class='prev' href='javascript:void(0);'>上移</a><a class='next' href='javascript:void(0);'>下移</a></p></li>");
    $("ul").append($li);
   });
   //使用事件委托写在一起，提高性能
   $("ul").delegate("li a","click",function(){
    //首先判断点击的是哪个a
    if($(this).attr("class") == "prev"){
     //判断是否存在该元素
     if($(this).closest("li").prev().length ==0){
      $(".pop_message").html("已到顶部!");
      $(".pop_con").fadeIn();
      return false
     }
     $(this).closest("li").prev().before($(this).closest("li"));
    }else if($(this).attr("class") == "next"){
     if($(this).closest("li").next().length ==0){
      $(".pop_message").html("已到底部!");
      $(".pop_con").fadeIn();
     }
     $(this).closest("li").next().after($(this).closest("li"));
    }else{
     $(this).closest("li").remove();
    }
   })
  })
 </script>
</head>
<body>
 <div class="con">
  <h3>To do list</h3>
  <input type="text" id="input">
  <button id="add">增加</button>
  <ul class="ul">
   <li>
    <h3>学习html</h3>
    <p>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">删除</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
    </p>
   </li>
   <li>
    <h3>学习css</h3>
    <p>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">删除</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
    </p>
   </li>
   <li>
    <h3>学习ps</h3>
    <p>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">删除</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
     <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
    </p>
   </li>
  </ul>
 </div>
 <div class="pop_con">
  <div class="pop">
   <div class="pop_title">
    <h3>提示信息</h3>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close">X</a>
   </div>
   <div class="pop_message">输入框不能为空</div>
   <div class="pop_confirm">
    <button>朕知道了</button>
   </div>
  </div>
 </div>
</body>
</html>

九、滚轮事件与函数节流1、jquery.mousewheel插件使用

jquery中没有滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.nousewheel.js。

2、函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短时间内多次触发执行绑定的函数可以巧妙的使用定时器来减少触发的次数，实现函数节流。

3、整屏滚动实例

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>整屏滚动</title>
 <link rel="stylesheet" href="../css/reset.css" rel="external nofollow" rel="external nofollow" >
 <style>
  .page_con{
   width:100%;
   /*必须是固定定位，否则会有问题*/
   position:fixed;
   top:0;
   left:0;
   overflow: hidden;
  }
  .page{
   position:relative;
  }
  .page .main_con{
   width:900px;
   height:400px;
   position:absolute;
   left:50%;
   top:50%;
   margin-top:-200px;
   margin-left:-450px;
  }
  .page .main_con .left_img{
   width:363px;
   height:400px;
  }
  .page .main_con .left_img,.page .main_con .right_img{
   opacity: 0;
   position: relative;
   filter:alpha(opacity = 0);
   transition:all 1s ease 300ms;
  }
  .page .main_con .right_info{
   width:500px;
   height:300px;
  }
  .page .main_con .right_info,.page .main_con .left_info{
   font-size:20px;
   line-height:50px;
   color:#666;
   text-indent:2em;
   text-align:justify;
   position:relative;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;
  }
  .main_con .right_img{
   width:522px;
   height:400px;
   top:-50px;
  }

  .main_con .left_info{
   width:350px;
   height:300px;
   bottom:-50px;
  }
  .main_con .left_img,.main_con .left_info{
   left:-50px;
  }
  .main_con .right_img,.main_con .right_info{
   right:-50px;
  }
  .main_con .center_img{
   opacity: 0;
   filter:alpha(opacity = 0);
   text-align: center;
   transition: all 1s ease 300ms;
  }
  .moving .main_con .left_img,.moving .main_con .left_info,.moving .main_con .center_img{
   left:0;
   opacity: 1;
   filter:alpha(opacity = 100);
  }
  .moving .main_con .center_img{
   transform: scale(0.8);
  }
  .moving .main_con .right_info,.moving .main_con .right_img{
   margin-top:50px;
   right:0;
   opacity: 1;
   filter:alpha(opacity = 100);
  }
  .moving .main_con .right_img{
   /*top:25px;*/
  }
  .page1{
   background:orange;
  }

  .page2{
   background:lightgreen;
  }
  .page3{
   background:cyan;
  }
  .page4{
   background:pink;
  }
  .page5{
   background:lightblue;
  }
  .points{
   width:16px;
   height:176px;
   position:fixed;
   top:50%;
   right:20px;
   margin-top:-88px;
  }
  .points li{
   width:16px;
   height:16px;
   line-height:16px;
   margin-top:15px;
   border:1px solid #666;
   border-radius:50%;
  }
  .points li:hover,.points li.active{
   width:6px;
   height:6px;
   cursor: pointer;
   border:6px solid #fff70c;
  }
 </style>
 <script src="../js/jquery-1.12.4.min.js"></script>
 <script src="../js/jquery.mousewheel.min.js"></script>
 <script>
  $(function(){
   $(".page1").addClass("moving");
   var page = $(".page");
   var len = page.length;
   var currentPage = 0;
   var timer = null;
   //获取显示区域的高度
   var $h = $(window).height();
   page.css({height:$h});
   $(window).mousewheel(function(event,dat){
    //向下滑dat为-1,向上滑dat为1
    //清除前面开的定时器，实现函数节流
    clearTimeout(timer);
    timer = setTimeout(function(){
     if(dat == -1){
      currentPage++;
      if(currentPage>len-1){
       //如果大于4的话，就不往下滑
       currentPage=len-1;
      }
     }else{
      currentPage--;
      //判断当前所在页是否小于0，如果小于就不往上滑。
      if(currentPage<0){
       currentPage=0;
      }
     }
     $(".page").eq(currentPage).addClass("moving").siblings().removeClass("moving");
     $("ul li").eq(currentPage).addClass("active").siblings().removeClass("active");
     $(".page_con").animate({top:-$h*currentPage},300);
    },200);

   });
   $(".points").delegate("li","click",function (){
    $(".page").eq($(this).index()).addClass("moving").siblings().removeClass("moving");
    $(this).addClass("active").siblings().removeClass("active");
    currentPage = $(this).index()+1;
    //首先判断下点击的元素在当前选中的元素的上面还是下面，如果是在上面的话，top值为正值，否则为负值。
    if($(this).index()<$(".active").index()){
     $(".page_con").animate({top:$h*$(this).index()});
    }else{
     $(".page_con").animate({top:-$h*$(this).index()});
    }
   })
  })
 </script>
</head>
<body>
<div class="page_con">
 <div class="page page1">
  <div class="main_con clearfix">
   <div class="page_img float_left left_img">
    <img src="../images/001.png" alt="">
   </div>
   <div class="page_content float_right right_info">
    Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
   </div>
  </div>
 </div>
 <div class="page page2">
  <div class="main_con clearfix">
   <div class="page_content float_left left_info">
    2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
   </div>
   <div class="page_img float_right right_img">
    <img src="../images/002.png" alt="">
   </div>
  </div>
 </div>
 <div class="page page3">
  <div class="main_con clearfix">
   <div class="page_img float_left left_img">
    <img src="../images/004.png" alt="">
   </div>
   <div class="page_content float_right right_info">
    Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
   </div>
  </div>
 </div>
 <div class="page page4">
  <div class="main_con clearfix">
   <div class="page_content float_left left_info">
    2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
   </div>
   <div class="page_img float_right right_img">
    <img src="../images/003.png" alt="">
   </div>
  </div>
 </div>
 <div class="page page5">
  <div class="main_con">
   <div class="page_img center_img">
    <img src="../images/005.png" alt="">
   </div>
  </div>
 </div>
</div>
<ul class="points">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
</body>
</html>

以上这篇浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery Plupload上传插件的使用
Apr 19 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
QRCode.js：基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 #jQuery
ip2region(1) Postman(1) BottomSheetDialog(1) DeOldify(1) localStorage(1) 注解(1) dataBinding(1) virtualenv(1) scrapy(1) 反射(1)
You might like
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
微信公众号-获取用户信息（网页授权获取）实现步骤
2016/10/21 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
js实现简单模态框实例
2018/11/16 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
python验证码识别实例代码
2018/02/03 Python
Python实现购物车程序
2018/04/16 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
普通大学毕业生自荐信范文
2014/02/23 职场文书
继承公证书样本
2014/04/04 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
物业品质提升方案
2014/06/08 职场文书
介绍信怎么写
2015/01/30 职场文书
少年的你：世界上没有如果，要在第一次就勇敢的反抗
2019/11/20 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Python破解极验滑动验证码详细步骤
2021/05/21 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android