jQuery事件委托

<ul id="ulBox">
<li data-id="1"></li>
<li data-id="2"></li>
<li data-id="3"></li>
</ul> $("#ulBox").on('click','li',function(){
console.log($(this).attr("data-id"));
})

on()事件相当于是$(document).click(function(){if(点击的是btn){}}),给document添加了一个click事件,党点击的是btn,事件冒泡原理,从里到外,就相当于点击了document,那么就会执行后面的操作,本质上只给document添加了一个事件,而click()事件是给所有btn添加了click事件。

另外on()事件可以添加多个事件。

on()委托事件的优点:原来的事件绑定,要绑定好多事件,现在只需要绑定一个事件,大大提高了效率和页面性能,解决的动态添加元素导致不能触发的bug。

Jq1.7+开始支持。

适用性:
         适合:click 、mousedown、mouseup、keydown 、keyup、keypress
        不适合:mouseover和mouseout虽然也有事件冒泡,但是处理他们要特别注意,因为需要经常计算他们的位置,处理起来不太容易,
                     focus、blur之类的本身就没有冒泡的特性,自然不能用事件委托;

jQuery事件委托的更多相关文章

  1. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  2. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  3. jquery事件委托详解

    jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...

  4. jquery 事件委托

    什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...

  5. Jquery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  6. 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

  7. jQuery事件委托方法 bind live delegate on

    1.bind    jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法:  bind(type,[data],function(e)); 特点: a.适合页 ...

  8. jQuery事件委托之Safari失效的解决办法--摘抄

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  9. JavaScript / JQuery事件委托如何实现?

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

随机推荐

  1. 音频音乐播放 Service

    界面效果:         界面就一个播放的Button和一个进度条SeekBar,也可以自己加上两个显示时间的TextView: 点击播放时,有音乐声音,进度条也会自动更新,Button文字变成暂停 ...

  2. python 模块定义导入

    1.定义模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是:.py结尾的python文件(文件名:test.py,对应的模块名:test)包:本质就是一个目录(必须 ...

  3. sql存储过程进行条件筛选

    1.创建临时表,把存储过程结果集保存到临时表,对临时表进行筛选. Create Table #TmpTable(FieldList) Insert Into #TmpTable Exec StoreP ...

  4. [原]CentOS 7.2 1511部署L2TP/IPsec服务器及客户端

    快过年了,感觉从去年开始,我们公司就变成了“别人的公司”,基本上提前一星期就放假了,好开心.正好可以利用这一段时间,把前段时间一些疑惑的问题解决下:) 然而挡在面前的一个拦路虎是:很多时候不能愉快的G ...

  5. Android 面试问答

    Android 面试问答 目录 数据结构和算法 java核心知识 Android核心知识 架构 设计相关问题 相关工具和技术 Android 测试驱动开发 其他 数据结构和算法 ******关于此类问 ...

  6. Centos7 进入单用户模式,修复系统

    一.开机时进入如下界面,(按下方向键盘,阻止系统自动继续) 按e键出现下面界面 按方向键下,定位到最后,找到“ro”一行,ro的意思是read only,将“ro”替换成 rw init=/sysro ...

  7. java特殊字符分隔符

    点,string.split("[.]") . 竖线, string.split("\\|"). 星号, string.split("\\*" ...

  8. 阿里云ECS装LAMP环境

    学生计划9.9买个一个ECS,要做PHP开发,所以搭建一个Lamp的环境 1.使用镜像,附件 sh-1.5.5附于文后. 2.一键安装 2.1 输入命令:chmod –R 777 sh-1.5.5 c ...

  9. Array of Doubled Pairs LT954

    Given an array of integers A with even length, return true if and only if it is possible to reorder ...

  10. 使用android访问SQLServer数据库

    1.SQL驱动 下载可以支持android的SQL驱动,下载地址http://sourceforge.net/projects/jtds/files/ 注意只能下载1.2.7版本.android不支持 ...