jQuery事件委托
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+开始支持。
jQuery事件委托的更多相关文章
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
- jquery事件委托详解
jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...
- jquery 事件委托
什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...
- Jquery事件委托之Safari
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
- 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...
- jQuery事件委托方法 bind live delegate on
1.bind jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法: bind(type,[data],function(e)); 特点: a.适合页 ...
- jQuery事件委托之Safari失效的解决办法--摘抄
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
- JavaScript / JQuery事件委托如何实现?
一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...
随机推荐
- 音频音乐播放 Service
界面效果: 界面就一个播放的Button和一个进度条SeekBar,也可以自己加上两个显示时间的TextView: 点击播放时,有音乐声音,进度条也会自动更新,Button文字变成暂停 ...
- python 模块定义导入
1.定义模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是:.py结尾的python文件(文件名:test.py,对应的模块名:test)包:本质就是一个目录(必须 ...
- sql存储过程进行条件筛选
1.创建临时表,把存储过程结果集保存到临时表,对临时表进行筛选. Create Table #TmpTable(FieldList) Insert Into #TmpTable Exec StoreP ...
- [原]CentOS 7.2 1511部署L2TP/IPsec服务器及客户端
快过年了,感觉从去年开始,我们公司就变成了“别人的公司”,基本上提前一星期就放假了,好开心.正好可以利用这一段时间,把前段时间一些疑惑的问题解决下:) 然而挡在面前的一个拦路虎是:很多时候不能愉快的G ...
- Android 面试问答
Android 面试问答 目录 数据结构和算法 java核心知识 Android核心知识 架构 设计相关问题 相关工具和技术 Android 测试驱动开发 其他 数据结构和算法 ******关于此类问 ...
- Centos7 进入单用户模式,修复系统
一.开机时进入如下界面,(按下方向键盘,阻止系统自动继续) 按e键出现下面界面 按方向键下,定位到最后,找到“ro”一行,ro的意思是read only,将“ro”替换成 rw init=/sysro ...
- java特殊字符分隔符
点,string.split("[.]") . 竖线, string.split("\\|"). 星号, string.split("\\*" ...
- 阿里云ECS装LAMP环境
学生计划9.9买个一个ECS,要做PHP开发,所以搭建一个Lamp的环境 1.使用镜像,附件 sh-1.5.5附于文后. 2.一键安装 2.1 输入命令:chmod –R 777 sh-1.5.5 c ...
- 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 ...
- 使用android访问SQLServer数据库
1.SQL驱动 下载可以支持android的SQL驱动,下载地址http://sourceforge.net/projects/jtds/files/ 注意只能下载1.2.7版本.android不支持 ...