首页
所有分类
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实现定时刷新功能代码
May 09 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jquery插件实现悬浮的菜单
Apr 24 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) 晶体管(2) BOSE(2) 77A(2) MOTOROLA(1) 收信机(3) 66-XI(1) 军机(1) VOLVO(1) 音箱(1)
You might like
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php实现将Session写入数据库
2015/07/26 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python MySQLdb使用教程详解
2018/03/20 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
pycharm修改file type方式
2019/11/19 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
pytorch简介
2020/11/11 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
美国领先的家庭智能音响系统品牌：Sonos
2018/07/20 全球购物
美国宠物护理专家：Revival Animal Health
2020/01/05 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
党员干部承诺书
2014/03/25 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
迟到检讨书2000字（精选篇）
2014/10/07 职场文书
windows安装python超详细图文教程
2021/05/21 Python
python内置模块之上下文管理contextlib
2022/06/14 Python