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修改 ...
随机推荐
- windows能连网络，可是打不开网页，出现无法解析server的DNS
首先,我想先说作为一名刚学完计算机网络课的学生,并且还完毕了学校的号称和斯坦福一个难度级别的网络实验之后.我觉得自己对于计算机网络还是勉强入门了.对于各种之前仅仅是听过的各种tcp.http.路由器. ...
- JQuery实现的 checkbox 全选；<select>下拉框功能
1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...
- JavaMail 接收邮件及删除
解析读取收件箱中邮件: import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io. ...
- Xcode修改新建项目注释模板（作者和公司名等）
我们新建项目后,每个页面头部都有一段注释说明, 如下: 如果我们想修改Created by XXX 和 Copyright 版权内容,该如何做呢? 1.对于修改作者:Created by xxx 这里 ...
- Linux系统vi编辑器提示E325: ATTENTION的解决方法
非正常关闭文件会报这样的警告信息, 原因是系统产生了一个.swp的文件. 删除就行了.(前提是确认.swp文件没用了.) 例如: rm -f /etc/.shadowsocks.json.swp 详情 ...
- Kafka 如何读取指定topic中的offset -------------用来验证分区是不是均衡！！！(__consumer_offsets)（已验证！）
我现在使用的是librdkafka 的C/C++ 的客户端来生产消息,用flume来辅助处理异常的数据,,, 但是在前段时间,单独使用flume测试的时候发现,flume不能对分区进行负载均衡!同一个 ...
- Intel Galileo驱动单总线设备（DHT11\DHT22）（转）
Intel Galileo一代的IO翻转速度不够,无法直接驱动单总线设备,二代听说改进了,但没有库,于是国外开发者想出了另一种法子,转过来给大家学习下.如果后面有时间,再来翻译.原文地址:http:/ ...
- 如果没有 Android 世界会是什么样子？
2005年谷歌从安迪·鲁宾(Andy Rubin)手中收购Android系统,起初安迪·鲁宾(Andy Rubin)只是想为数码相机开发出一个更为先进的系统,所以有了 Android.但是智能手机行业 ...
- 使用嵌入式关系型SQLite数据库存储数据
除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库—SQLite, 1.SQLite3支持 ...
- 【Android】Android如何对APK反编译
本文笔者粗略的介绍如何利用一些工具,对Android进行反编译,从而得到源码,希望对你有所帮助,笔者的android环境为4.4.2. 1.准备资源. 在开始之前,需要准备三项工具:apktool ...