先来段代码

 <!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. 零点起飞学HTML+CSS (顼宇峰) PDF扫描版

    零点起飞学HTML+CSS系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识.本书涉及面广,从 ...

  2. 关于redis-windows环境下的一些配置：

    如果报错: The Windows version of Redis allocates a memory mapped heap for sharing with the forked proces ...

  3. 【C#】EF学习<一> CodeFist

    [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) 目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) http://www.cnblogs.com/ ...

  4. unity list循环

    复制的感觉挺有用就保存下来 using System.Collections;using System.Collections.Generic;using UnityEngine; public cl ...

  5. NSString 字符串

    0.字符串常用操作 自动补充方法:当字符串长度不够需要自动补充到一定的位数 OC字符串与C语言字符串之间的相互转换 1.不可变字符串的创建 // 直接创建不可变字符串 /* 在 OC 中,使用 @&q ...

  6. Nginx入门介绍与安装

    Nginx是什么? Nginx是俄罗斯人编写的十分轻量级的HTTP和反向代理服务器.发音:"engine X" Nginx能干什么? (1)Http反向代理 Nginx 支持正则表 ...

  7. Iterator 遍历器

    1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...

  8. xshell学习笔记

    $0:当前Shell程序的文件名dirname $0,获取当前Shell程序的路径cd `dirname $0`,进入当前Shell程序的目录 echo "hvkjvk" > ...

  9. Ubuntu1804登录界面闪退

    目前主力机操作系统已经由Ubuntu 16.04 lts升级到Ubuntu 18.04 lts.由于是跨版本升级过来,而且由unity(个人觉得挺好)替换成了gnome3,经常出点小问题.这次由于安装 ...

  10. P2115 [USACO14MAR]破坏Sabotage

    题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...