先来段代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>JS常用事件区分</title>

 </head>

 <script src="jquery-3.3.1.js"></script>

 <body>

     <div id="div">

         <button id="btn01">只能点击我一次</button>

         <button id="btn02">我绑定俩事件（a，b）</button>

         <button id="btn03">解除2所有事件</button>

         <button id="btn04">解除2的事件b</button>

         <button id="btn05" class="myclass">创建一个按钮样式，样式为myclass</button>

         <button id="btn06">解绑myclass的事件</button>

     </div>

     <!-- 脚本 -->

     <script type="text/javascript">

         $(function() {

             // 一次点击

             $("#btn01").one('click', function(event) {

                 alert("我只会出来一次哦");

             });

             // 单击事件

             $("#btn02").click(function(event) {

                 /* Act on the event */

                 alert("我是默认事件");

             });

             //使用别名创建一个点击事件，被移除不影响原本的click

             $("#btn02").on("click.b", function(event) {

                 /* Act on the event */

                 alert("我是新添加的事件");

             });

             //删除btn02的click事件

             $("#btn03").click(function(event) {

                 //$("body").off("click", "button");错误写法

                 $("#btn02").off("click");

             });

             $("#btn04").click(function(event) {

                 //删除btn02的click.b事件，保留原本的click事件

                 $("#btn02").off("click.b");

             });

             // btn05

             $("body").on('click', ".myclass", function(event) {

                 /* Act on the event */

                 $("body").append("<button id='btn05' class='myclass'>样式为myclass</button>");

             });

            /*

             当将btn05下面的方法换成这个后，使用$("body").off("click", "**");将无效

             $("#div").on('click', ".myclass", function(event) {

                 $("#div").append("<button id='btn05' class='myclass'>样式为myclass</button>");

             });

             */

             // btn06,按钮6点击时，解绑掉body下的所有.myclass预绑定的事件

             $("#btn06").click(function(event) {

                 //清除body下所有有.myclass样式的click事件

                 // $("body").off("click", ".myclass");

                 //清除绑定在body身上的所有冒泡事件

                 $("body").off("click", "**");

             });

         })

     </script>

 </body>

 </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. 【Arcgis for android】spatialite打开shapefile

    互联网(free and share) 本文参考下面的博文: http://blog.csdn.net/arcgis_all/article/details/8232976 Preparation: ...

  2. angular 分页2

    http://www.alliedjeep.com/2547.htm AngularJS Code (Users.js) var Users = angular.module('Users', []) ...

  3. c# dictionary，list排序

    Dictionary Key排序 Dictionary<string, string> dct= new Dictionary<string, string>(); Dicti ...

  4. TigerVNC编译安装

    TigerVNC official site:http://www.linuxfromscratch.org/blfs/view/svn/xsoft/tigervnc.html TigerVNC版本: ...

  5. fopen_s()

    原型:errno_t  fopen_s( FILE** pFile, const char *filename, const char *mode );   例子: char *filePath=&q ...

  6. C 语言 clock() 函数，例：计算多项式值

    C 语言 clock() 函数,例:计算多项式值 /** * clock(): 捕捉从程序开始运行到 clock() 被调用时所耗费的时间. * 这个时间单位是 clock tick, 即" ...

  7. Binder学习笔记（五）—— Parcel是怎么打包数据的？

    前文中曾经遇到过Parcel,从命名上知道他负责数据打包.在checkService的请求/响应体系中,Parcel只打包了基本数据类型,如Int32.String16……后面还要用于打包抽象数据类型 ...

  8. cenos 上的php 支持GD库问题

    ---恢复内容开始--- thinkphp 开发的项目verify类无法引用,原因是没有开启gd库 环境:CentOS 6.4,php-5.3.3需求:php支持GD库解决方案:GD是Linux下的一 ...

  9. ThreadLocalRandom原理

    原文链接:https://www.jianshu.com/p/9c2198586f9b 2.2. 并发包中ThreadLocalRandom类原理剖析 ThreadLocalRandom类是JDK7在 ...

  10. 设置django在linux后台运行&查看端口使用

    1.后台运行(&),允许所有用户(0.0.0.0)访问,端口为8888 nohup python manage.py runserver 0.0.0.0 8888 & 2.由端口号88 ...