事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。

相反的,事件冒泡是自下而上的去触发事件。

并不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load、unload

阻止冒泡的方法

if(event && event.stopPropagation){ // w3c标准 
  event.stopPropagation(); 
}else{ // IE系列 IE 678 
  event.cancelBubble = true; 
}

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

$("#info_table td").bind(

  {
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},
    mouseout:function(){$("body").css("background-color","#FFFFFF");}
  }
);

$("#info_table td").live("click",function(){/*显示更多信息*/}); 
$("#info_table").delegate("td","click",function(){/*显示更多信息*/}); 
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector,则为事件委托;否则,就是常规绑定。
现在只要用on方法就可以了,推荐用on方法进行委托或常规绑定事件
If there are similarities, forgive me.

JavaScript捕获与冒泡与委托的更多相关文章

  1. JavaScript捕获和冒泡探讨

    <div id="div"> <input type="button" value="banana" id="b ...

  2. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

  3. JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

    JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...

  4. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  5. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  6. DOM事件-冒泡、捕获、传播、委托

    事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...

  7. JavaScript(3)---事件冒泡、事件捕获

    JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...

  8. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  9. javaScript的事件冒泡事件捕获

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

随机推荐

  1. 浅谈.NET(C#)与Windows用户账户信息的获取

    原文:浅谈.NET(C#)与Windows用户账户信息的获取 目录 1. 用户账户名称 - 使用Environment类 2. 用户账户信息 - 使用WindowsIdentity和IdentityR ...

  2. mstsc也要使用/admin参数

    mstsc.exe /admin http://stackoverflow.com/questions/6757232/service-not-responding-error-1053

  3. Qt DLL总结【二】-创建及调用QT的 DLL(三篇)good

    目录 Qt DLL总结[一]-链接库预备知识 Qt DLL总结[二]-创建及调用QT的 DLL Qt DLL总结[三]-VS2008+Qt 使用QPluginLoader访问DLL 开发环境:VS20 ...

  4. 新玩法,CentOS7中LVM通过扩展逻辑卷扩展swap空间

    在我们日常运维工作中,偶尔也会遇到需要扩展swap空间的操作.扩展swap空间的方法很多,现在让我们一起来探讨一下,在LVM下扩展swap空间的方法. 1.查看一下卷组,是否还有空闲空间能用于扩展sw ...

  5. pip升级到18.0版本过程中报错解决方法

    我这台电脑是windows10系统,一般在cmd命令行界面下执行pip的升级命令:pip install –upgrade pip 安装的时候,会有拒绝访问报错:这个时候应该是权限的问题,于是在win ...

  6. vue 左右滑动效果

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架 ...

  7. kali 开启键盘背光灯 && 自定义开启终端

    新建文件保存扩展名为.sh 编辑文件,键入如下代码 #!/bin/bash - status=/tmp/keyboard_led_status if [[ ${1} == "on" ...

  8. 一步到位安装Centos7、配置VMware、连接Xshell

    1.创建虚拟机 1.0 创建新的虚拟机 1.0.1 选择自定义配置 打开VMware,点击创建新的虚拟机. 如下图所示:   1.0.2 选择虚拟机硬件兼容性 如下图所示:   1.0.3 安装客户操 ...

  9. HBase —— 集群环境搭建

    一.集群规划 这里搭建一个3节点的HBase集群,其中三台主机上均为Regin Server.同时为了保证高可用,除了在hadoop001上部署主Master服务外,还在hadoop002上部署备用的 ...

  10. Scala 学习之路(五)—— 集合类型综述

    一.集合简介 Scala中拥有多种集合类型,主要分为可变的和不可变的集合两大类: 可变集合: 可以被修改.即可以更改,添加,删除集合中的元素: 不可变集合类:不能被修改.对集合执行更改,添加或删除操作 ...