浅谈事件冒泡、事件委托、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 相关文章推荐
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Jquery Fade用法详解
Nov 06 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
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHPMyAdmin 快速配置方法
2009/05/11 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
使用js显示当前时间示例
2014/03/02 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python切片用法实例教程
2014/09/08 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
自学python用什么系统好
2020/06/23 Python
python cookie反爬处理的实现
2020/11/01 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
销售冠军获奖感言
2014/02/03 职场文书
大学毕业感言100字
2014/02/03 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
经理任命书模板
2014/06/06 职场文书
片区教研活动总结
2014/07/02 职场文书
班组拓展活动方案
2014/08/14 职场文书
检讨书格式
2015/05/07 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python