先来段代码

 <!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. 并发编程学习笔记之可见性&过期数据(二)

    想要使用多线程编程,有一个很重要的前提,那就是必须保证操纵的是线程安全的类. 那么如何构建线程安全的类呢? 1. 使用同步来避免多个线程在同一时间访问同一数据. 2. 正确的共享和安全的发布对象,使多 ...

  2. MVC之htmlhelper总结

    自学习mvc以来,htmlhelper使用的也非常多,下面开始总结一下吧,由于本人比较懒,内容大部分摘自slark.net的笔记, 有人问为什么用这个htmlhelper,我就喜欢用原生的标签,这个按 ...

  3. javascript dom与字符串相互转换

    js  dom与字符串相互转换 一.字符串转换dom: function stringToDom(str){ var obj=document.createElement("div" ...

  4. java java启动方式

     java启动方式 两种方案: 1.守护进程方式启动: java –jar命令: 例如:C:\eclise\work\test.jar C:\eclise\work\test.java 打开dos:输 ...

  5. “网易大数据讲堂第一期：数说”直播活动资料：课程回放收看及PPT下载

    欢迎访问网易云社区,了解更多网易技术产品运营经验. "网易大数据讲堂第一期:数说"直播活动昨晚顺利举行.感谢各位"数"友的支持和参与. 本次活动PPT可点击这里 ...

  6. 「JOI 2017 Final」JOIOI 王国

    「JOI 2017 Final」JOIOI 王国 题目描述 题目译自 JOI 2017 Final T3「 JOIOI 王国 / The Kingdom of JOIOI」 JOIOI 王国是一个 H ...

  7. Binder学习笔记（六）—— binder服务端是如何组织addService数据的

    在checkService的调查中我们知道客户端向ServiceManager请求服务名,ServiceManager根据服务名遍历本地链表,找到匹配的handle返回给客户端.这个handle显然是 ...

  8. #学习笔记# VALSE 2019.01.09 朱俊彦 --- Learning to Synthesize Images, Videos, and 3D Objects

    视频类型:VALSE-webinar 报告时间:2019年01月09日 报告人:MIT朱俊彦 报告题目:Learning to Synthesize Images, Videos, and 3D Ob ...

  9. 魔法少女 LJJ——线段树

    题目 [题目描述] 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女 LJJ 已经觉得自己见过世界上的所有稀奇古怪的事情了. LJJ 感叹道“这里真是个迷人的绿色世界,空气清新.淡雅,到处 ...

  10. [bzoj2743][HEOI2012]采花（树状数组）

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...