事件捕获指的是从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. sql xml 查询指定节点值,以及节点属性值

    SELECT   top 10  [HFMBDATA].query('(/Items/Item[@ID=''tbBryj''])').value('(//TextValue)[1]','nvarcha ...

  2. ELINK编程器典型场景之远程镜像

    当不想直接提供Hex/Bin等二进制程序文件给用户时,通过生成远程镜像功能将程序文件加密后,再提供给用户自行脱机下载来达到远程更新的目的. 远程镜像生成的一般步骤为由客户端提供SN码,本地依据SN码加 ...

  3. 无法删除 NTFS 盘上的文件或文件夹(对Windows文件的各种情况有比较详细的描述)

    简介 本文介绍您可能无法删除 NTFS 文件系统卷上的文件或文件夹的原因,以及如何分析造成此问题的不同原因从而解决此问题. 更多信息 注意:在内部,NTFS 将文件夹作为特殊类型的文件进行处理.因此, ...

  4. asp.net下ueditor上传大容量视频报http请求错误的解决方法

    故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点 ...

  5. sqlite查询问题,由字母大小写敏感引起

    目前做的项目之前是用mysql,这是个错误的选择,因为本身并不是服务器-客户端模式的项目,而是一个CS架构项目,mysql这种需要较繁复配置的数据库并不合适.需要的应该是sqlite这类,内嵌的数据库 ...

  6. Windows下 Composer 安装 Thinkphp5 的记录.

    首先安装Composer, 下载地址: https://www.phpcomposer.com/ Windows安装过程及其简单,请自行搜索解决. 接下来Win+R, 启动命令行窗口,以下所有操作都是 ...

  7. 网络文件系统nfs文件系统使用(比较全面)

    一.NFS简介 1.NFS就是Network FileSystem的缩写,它的最大功能就是可以通过网络让不同的机器,不同的操作系统彼此共享文件(sharefiles)——可以通过NFS挂载远程主机的目 ...

  8. Qt加载百度离线地图

    1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...

  9. Ubuntu 下压缩软件的安装

    在ubuntu下,系统就自带一个压缩包管理软件,但是,它默认是不支持rar和7zip格式的.因此,我们可以给它直接“增强”一下.就成了万能的了.安装方法,终端里面: sudo apt-get inst ...

  10. 发布一个Django项目

    一.部署环境准备,准备python3和虚拟环境解释器,virtualenvwrapper 1.修改python3的环境变量 PATH=/opt/python36/bin:/usr/local/sbin ...