先来段代码

 <!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. SpringMVC 配置式开发-BeanNameUrlHandlerMapping（七）

     第一种处理器映射器BeanNameUrlHandlerMapping.class(注册器映射器 bean节点的class属性中用到的,这种方式dean id属性必须要以“/”开头) 第二种处理器映射 ...

  2. Spring 特点

    IoC:豆浆和打针的例子.一个是主动的,一个是被动的.比如在spring里面我们需要对象了,提出需求,spring容器会把对象给你.(这就是IoC) AOP:

  3. 51nod1244 莫比乌斯函数之和（杜教筛）

    题面 传送门 题解 我--我忘记把预处理的块的大小调成\(n^{\frac{2}{3}}\)了--(仰天) 首先\(\mu*1=e\) 然后杜教筛就行了 //minamoto #include< ...

  4. 前端性能优化-gzip

    为什么要开启GZIP 我们需要下载一个100KB的Javascript文件,正常的下载量就是100KB,如果我们把文件在服务端压缩一下,压缩成30kb,下载到客户端再进行解压,这样就减少了大量的HTT ...

  5. 用勤哲excel服务器开发旅行社管理软件

    做这个旅行社管理软件之前,旅行社给我的印象就是“拉客”与“接客”,业务模式应该比较简单.但做起这样一个旅行社管理软件,才发现麻雀虽小.五脏俱全,一个旅行社的运作,牵扯到的方方面面远远超出自己之前的理解 ...

  6. tomcat启动优化

    tomcat的最佳实践运行模式 Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化. org.apache.coyote.http11.Http11Protocol ...

  7. 在生产环境下禁用swagger

    学习目标 快速学会使用注解关闭Swagger2,避免接口重复暴露. 使用教程 禁用方法1:使用注解@Profile({"dev","test"}) 表示在开发或 ...

  8. 百度地图 api bug 解决.......

    百度地图 遇到了一个默明奇妙的bug.....  调用后中心点 不再 point(标注的点上...)这是需要执行一次(仅一次) 当 地图 加载完后 执行(这个方法你每次改地图 都会执行...所以让他执 ...

  9. Web项目HttpContext.Current 为空

    项目中,用到了WCF Service服务,用的是Windows身份验证,正常登陆后 HttpContext.Current=null 解决方法—— 1.在Web.config文件中添加配置项 < ...

  10. UVA11082 行列模型

    行列二分图模型,行指向列即表示权重w[i][j] 避免零流的方法就是使下界为1 #include<bits/stdc++.h> #define rep(i,j,k) for(int i = ...