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修改 ...
随机推荐
- Axure 地区选择（选择省份之后可以选择对应的地级市）
百度网盘:http://pan.baidu.com/s/1c1ZjUPq
- django之创建第7-6-第三种传值方式
1.创建bar.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法
OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法 在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Cont ...
- ios中 radioButton和DataPIcker，九宫格封装好使用
下载地址 http://pan.baidu.com/share/link?shareid=2894506499&uk=923776187 引用这几个文件 radiobutton.封装好单选按钮 ...
- ios 中UIViewController的分类
#import <UIKit/UIKit.h> #define TOPVIEWTAG 0x10000 // 导航栏的图片 @interface UIViewController (Chnb ...
- Swift3.0 - 实现剪切板代码拷贝及跨应用粘贴
有个需求,点击某个按钮,实现一段内容的拷贝,然后到其他应用内,直接长按粘贴. 实现如下: /// 测试剪切板,实现代码拷贝内容 func testPasteBoard(str:String) { // ...
- 回到顶部bug
参考自一博客(https://www.cnblogs.com/abao0/p/6642288.html)内有慕课网教程(后发现有bug, 弃置不用了) 以下有问题, 当滚动条处于顶部时, 刷新页面, ...
- Debug 路漫漫-05
Debug 路漫漫-05: 1.使用这种方式计算 AUC 指标,结果出来居然是 NAN, —— 分母为(M*N),M或者N必有一个为0 了.(nan出现的情况绝大部分是分母出现0了) 若分子为0的 ...
- Mysql模糊查询 select count(*) from sys_invitation where from_id like '%1006%';
select count(*) from sys_invitation where from_id like '%1006%'; 查询结果 select * from sys_invitation w ...
- GCD 容易让人迷惑的几个问题
写在开头: 本文旨在阐述一些大家容易产生迷惑的GCD相关内容,如果是需要了解一些GCD概念或者基础用法,可以看看这两篇文章:GCD 扫盲篇.巧谈GCD . 目录: 迷惑一:队列和线程的关系 迷惑二:G ...