首页
所有分类
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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery css实现流程进度条
Mar 26 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
放大器(1) S900(1) 沃尔沃(1) E1-XM(1) 矿石收音机(1) 军机(1) DSP(2) ETON(1) R601SW(1) VOLVO(1)
You might like
PHP统计目录下的文件总数及代码行数（去除注释及空行）
2011/01/17 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
js中的闭包实例展示
2018/11/01 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Jack Rogers官网：美国经典的女性鞋靴品牌
2019/09/04 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
岗位职责风险防控
2014/02/18 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
房地产活动策划方案
2014/05/14 职场文书
个人承诺书怎么写
2014/05/24 职场文书
医院合作协议书
2014/08/19 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
运动会广播稿50字
2015/08/19 职场文书
python多线程方法详解
2022/01/18 Python