先来段代码

 <!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. 《Linux内核设计与实现》读书笔记(八)- 中断下半部的处理

    在前一章也提到过,之所以中断会分成上下两部分,是由于中断对时限的要求非常高,需要尽快的响应硬件. 主要内容: 中断下半部处理 实现中断下半部的机制 总结中断下半部的实现 中断实现示例 1. 中断下半部 ...

  2. C# SendMessage用法一二

    函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数PostMessage不同,将一个消息寄送到一个线程的消息队列后立即返回.  函数 ...

  3. c 数组作为返回值注意

    static char* Test() { char buf[] ="aa"; printf("%s\n",buf); return buf; } int ma ...

  4. MVC Controller传值到View的几种方式总结

    Controller中的代码如下 var bingo = new Web1.Models.Bingo() { Title = "测试", desc = "嘻嘻" ...

  5. 洛谷 P1879 [USACO06NOV]玉米田Corn Fields

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  6. [SinGuLaRiTy] 数论题目复习

    [SinGuLaRiTy-1020] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. [CQBZOJ 1464] Hankson 题目描述 H ...

  7. c语言——数组指针和通过指针引用数组元素的方法总结

    1.数组指针:即指向数组的指针 那么, 如何声明一个数组指针呢?int (* p)[10]; /*括号是必须写的,不然就是指针数组:10是数组的大小*/1拓展:有指针类型元素的数组称为指针数组. 2. ...

  8. 详解linux下批量替换文件内容的三种方法(perl,sed,shell)

    在建设本网站的时候,发现新建了很多的网页,突然发现,每个文件都需要进行修改一样的内容,一个一个打开很是麻烦,所以,总结了一下如何快速修改一个目录下多个文件进行内容替换.第三种方法用的不多 方法一 使用 ...

  9. angularJs增加行的操作

    <!-- 编辑窗口 --> <div class="modal fade" id="editModal" tabindex="-1& ...

  10. html 一些坑。。。

    margin-left 和 margin-right 才能够使用 auto top 和 bottom 不可以 在网页设计中...通常给img 父容器 一个 宽度...同时 ,指定 img width= ...