jQuery Direct and delegated events 直接事件与委托事件
ref: http://api.jquery.com/on/
直接事件： 将事件委托直接绑定到dom元素上，当事件发生时触发handler.
委托事件: 将事件委托绑定到dom元素的外层容器上，当事件发生时，冒泡到匹配的外层元素，触发相应handler.
采用委托事件的优势有2点： 1.效率高。对子元素数量非常多时，只需要绑定一个handler到父容器。 2. 可以对事件绑定调用时，尚未生成的子元素，仍然有效（只需要保证父容器已存在）。
jquery 使用on方法实现事件绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test jquery on method</title>
<style>
div{ border:solid 1px red; margin: 10px; padding: 10px;}
</style>
<script src="../JsCss/jquery-1.12.4.min.js"></script>
<script>
/*
ref: http://api.jquery.com/on/
jquery on 方法原型: .on( events [, selector ] [, data ], handler )
*/
$(function () {
// delegate event 委托事件
$("#btnAdd").click(function () {
$("#container").append("<div class='sub-container'><b>"+new Date().getTime()+"</b></div>");
});
$("#container").on('click', '.sub-container', function(e){
alert($(this).html());
});
// direct event 直接事件
$("#btnAdd2").click(function () {
$("#container2").append("<div class='sub-container'><b>"+new Date().getTime()+"</b></div>");
});
// If selector is omitted or is null, the event handler is referred to as direct or directly-bound.
$("#container2 .sub-container").on('click', function(e){
alert($(this).html());
});
});
</script>
</head>
<body>
<button id="btnAdd">Add div</button>
<div id="container">
<div>无事件触发</div>
<div class='sub-container'>xxx</div>
</div> <button id="btnAdd2">Add div</button>
<div id="container2">
<div>无事件触发</div>
<div class='sub-container'>xxx</div>
</div>
</body>
</html>
jQuery Direct and delegated events 直接事件与委托事件的更多相关文章
- 解密jQuery事件核心 - 委托设计（二）
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- jquery总结05-常用事件04-委托事件
委托事件on 多个事件绑定同一个函数 $("#elem").on("mouseover mouseout",function(){ });通过空格分离,传递不同 ...
- jQuery学习-事件之绑定事件（二）
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
- jQuery学习-事件之绑定事件（一）
我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- jQuery 实战读书笔记之第六章：事件本质
理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...
- 解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
随机推荐
- 〖Linux〗Ubuntu中使用KVM安装虚拟机
1. 安装软件: sudo apt-get install libvirt0 libvirt-bin libvirt-dev virt-manager qemu-system 2. 配置网桥: # i ...
- Xml中SelectSingleNode方法中的xpath用法
https://blog.csdn.net/wf520pb/article/details/2644549 最常见的XML数据类型有:Element, Attribute,Comment, Text. ...
- mysql: SELECT ... FOR UPDATE 对SELECT语句的阻塞实验
开两个连接A, B, 分别执行以下三个sql start 和 start ; 在A执行完1和2后, B执行1, 正常B执行2, 立即返回B执行3, 这时候被阻塞了 A执行3后, B的3立即返回 可以得 ...
- 单个APP页面支持屏幕旋转
1.info中支持所有的方向 2.APPDelega.h中添加属性 @property (nonatomic,assign) BOOL allowRotate; APPdelegate.m中实现方法 ...
- iOS block分析
block是代码块,其本质和变量类似.不同的是代码块存储的数据是一个函数体.使用Block,就可以像其他标准函数一样,传入参数,并得到返回值. 可以把Block当做Objective-C的匿名函数,B ...
- C语言学习笔记 (007) - 数组指针和通过指针引用数组元素的方法总结
1.数组指针:即指向数组的指针 那么, 如何声明一个数组指针呢? ]; /*括号是必须写的,不然就是指针数组:10是数组的大小*/ 拓展:有指针类型元素的数组称为指针数组. 2.通过指针引用数组元素的 ...
- shell脚本中解决SCP命令需要输入密码的问题
使用密钥文件. 这里假设主机A(192.168.100.3)用来获到主机B(192.168.100.4)的文件. 在主机A上执行如下命令来生成配对密钥: ssh-keygen -t r ...
- js解决浮点数的加减乘除
function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) ...
- @property的使用方法
参看廖大神的博客 使用@property 有时间整理一下. python 没有私有成员变量的概念,通常在变量前面加单/双下划线来表示私有变量(非共有变量). 通常在python中,以单下划线开始的成员 ...
- STL 的string类怎么啦？
前言 上个周末在和我的同学爬香山闲聊时,同学说到STL中的string类曾经让他备受折磨,几年前他开发一个系统前对string类还比较清楚,然后随着程序的复杂度的加深,到了后期,他几乎对strin ...