先来段代码

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.      <title>JS常用事件区分</title>
  6.  </head>
  7.  <script src="jquery-3.3.1.js"></script>
  8.  <body>
  9.  
  10.      <div id="div">
  11.          <button id="btn01">只能点击我一次</button>
  12.          <button id="btn02">我绑定俩事件（a，b）</button>
  13.          <button id="btn03">解除2所有事件</button>
  14.          <button id="btn04">解除2的事件b</button>
  15.          <button id="btn05" class="myclass">创建一个按钮样式，样式为myclass</button>
  16.          <button id="btn06">解绑myclass的事件</button>
  17.      </div>
  18.  
  19.      <!-- 脚本 -->
  20.      <script type="text/javascript">
  21.  
  22.          $(function() {
  23.              // 一次点击
  24.              $("#btn01").one('click', function(event) {
  25.                  alert("我只会出来一次哦");
  26.              });
  27.  
  28.              // 单击事件
  29.              $("#btn02").click(function(event) {
  30.                  /* Act on the event */
  31.                  alert("我是默认事件");
  32.              });
  33.              //使用别名创建一个点击事件，被移除不影响原本的click
  34.              $("#btn02").on("click.b", function(event) {
  35.                  /* Act on the event */
  36.                  alert("我是新添加的事件");
  37.              });
  38.  
  39.              //删除btn02的click事件
  40.              $("#btn03").click(function(event) {
  41.                  //$("body").off("click", "button");错误写法
  42.                  $("#btn02").off("click");
  43.              });
  44.  
  45.              $("#btn04").click(function(event) {
  46.                  //删除btn02的click.b事件，保留原本的click事件
  47.                  $("#btn02").off("click.b");
  48.              });
  49.  
  50.              // btn05
  51.              $("body").on('click', ".myclass", function(event) {
  52.                  /* Act on the event */
  53.                  $("body").append("<button id='btn05' class='myclass'>样式为myclass</button>");
  54.              });
  55.  
  56.             /*
  57.              当将btn05下面的方法换成这个后，使用$("body").off("click", "**");将无效
  58.              $("#div").on('click', ".myclass", function(event) {
  59.                  $("#div").append("<button id='btn05' class='myclass'>样式为myclass</button>");
  60.              });
  61.              */
  62.              // btn06,按钮6点击时，解绑掉body下的所有.myclass预绑定的事件
  63.              $("#btn06").click(function(event) {
  64.                  //清除body下所有有.myclass样式的click事件
  65.                  // $("body").off("click", ".myclass");
  66.  
  67.                  //清除绑定在body身上的所有冒泡事件
  68.                  $("body").off("click", "**");
  69.  
  70.              });
  71.          })
  72.  
  73.      </script>
  74.  
  75.  </body>
  76.  </html>

在某个元素身上绑定对子元素的时间，则只能让该元素解绑，其他人无效

js的事件冒泡的更多相关文章

  1. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  4. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  5. js的事件冒泡机制

    js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄

  6. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  7. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  9. JS中 事件冒泡与事件捕获

    [JS中的事件流]  1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点:   >>>什么情况下会产生事件冒泡 ① D ...

  10. js中事件冒泡，事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

随机推荐

  1. SpringMVC的理解

    SpringMVC工作原理 SpringMvc是基于过滤器对servlet进行了封装的一个框架,我们使用的时候就是在web.xml文件中配置DispatcherServlet类:SpringMvc工作 ...

  2. 国外物联网平台（2）：微软Azure IoT

    国外物联网平台(2)——微软Azure IoT 马智 平台定位 连接设备.其它 M2M 资产和人员,以便在业务和操作中更好地利用数据. 连接 IoT 设备 将所有设备连接到云,从这些设备接收大规模数据 ...

  3. Serialization之SOAP序列化

    前言 XML序列化还可用于对象序列化符合SOAP规范的XML流.SOAP是一种简单的基于XML的协议,它使应用程序通过HTTP来交换信息.专门为使用XML来传输过程调用而设计的.如同常规的XML序列化 ...

  4. BZOJ 1974 [Sdoi2010] auction 代码拍卖会（数位dp）

    题目描述 随着iPig在P++语言上的造诣日益提升,他形成了自己一套完整的代码库.猪王国想参加POI的童鞋们都争先恐后问iPig索要代码库.iPig不想把代码库给所有想要的小猪,只想给其中的一部分既关 ...

  5. Bash Shell 小试牛刀

    一.终端打印 [root@cai ~]# echo welcome to bash! welcome to bash! [cairui@cai ~]$ echo 'welcome to bash!' ...

  6. Python学习过程（一）

    Hi,最近得知了有这么一种计算机语言,名字叫Python,下面对自己从零开始学习的一个记录.被大家所熟知的语言有很多种,比如说C语言 .java .C++  .C#等,以及javascri和火的一塌糊 ...

  7. 平衡树学习笔记（3）-------Splay

    Splay 上一篇:平衡树学习笔记(2)-------Treap Splay是一个实用而且灵活性很强的平衡树 效率上也比较客观,但是一定要一次性写对 debug可能不是那么容易 Splay作为平衡树, ...

  8. 13.Convert BST to Greater Tree（将树转为更大树）

    Level:   Easy 题目描述: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every k ...

  9. 3D电影转2D普通电影，电脑上看

    下了一些电影,打开发现是左右两个一样的画面,什么情况?原来这就是传说中的3D,怎么像正常电影一样的看呢?第一反应去搜3D眼镜,价钱倒是不贵,但是不应急呀,肿么办?以下是观看方法: 一.看电脑上有QQ影 ...

  10. [PowerShell]template engine

    今天讨论的是如何在Powershell里实现一个简单的Template Engine的功能. 假设模板文件的内容如下:template.tt hello $name welcome $company ...