先来段代码

 <!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. left join和right join、inner join 区别

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner join(等值连接) ...

  2. 【Arcgis for android】保存地图截图到sd卡

    关键词:arcgis for android ,截图,bitmap,sd卡 参考文章:http://blog.csdn.net/wozaifeiyang0/article/details/767972 ...

  3. signalR之java client的websocket BUG处理

    最近在用SignalR,服务端已经写好(老铁,没毛病,很稳),然后有坑的是我还得写App端,那就撸吧,java也不是什么很难的东西.奈何坑多(已经踩了一波android的控件bug),这次遇到了MS的 ...

  4. ubuntu - 安装sqoop

    解析过程 参考:https://www.cnblogs.com/qingyunzong/p/8807252.html#_label4 一.下载 二.解压到指定目录 三.配置sqoop环境变量并生效 四 ...

  5. （原创）BZOJ 2038 小Z的袜子(hose) 莫队入门题+分块

    I - 小Z的袜子(hose) 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z ...

  6. Java项目之项目模板（登录注册）

    链接:http://pan.baidu.com/s/1hskYopm 密码:vffl

  7. [BZOJ3337] ORZJRY I --块状链表大毒瘤

    link 题目大意:维护一个序列 支持: 1.单点插入 2.单点删除 3.区间翻转 4.区间旋转 5.区间加 6.区间赋值 7.询问区间和 8.询问区间极差 9.询问区间与给定某个数差值绝对值的最小值 ...

  8. SSKeychain的使用 钥匙串

    一.首先要理解keychain与userdefaults的区别: 1.keychain是将数据加密后存储在本地,更安全.路径:Library/Application Support/iPhone Si ...

  9. 毕业设计 python opencv实现车牌识别 矩形矫正

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  10. eclipse安装阿里规范模板

    https://github.com/alibaba/p3c/tree/master/p3c-formatter 1.代码模板(含注释等) 2.代码格式化