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 直接事件与委托事件的更多相关文章

  1. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  2. jquery总结05-常用事件04-委托事件

    委托事件on 多个事件绑定同一个函数 $("#elem").on("mouseover mouseout",function(){ });通过空格分离,传递不同 ...

  3. jQuery学习-事件之绑定事件（二）

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  4. jQuery学习-事件之绑定事件（一）

    我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...

  5. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  6. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  7. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  8. jQuery 实战读书笔记之第六章：事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...

  9. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

随机推荐

  1. iOS中TableView小技巧

    摘要: TableView是ios开发中经经常使用到的控件,这里统一记录一下开发中遇到的经常使用小技巧,不断探索更新.也希望大家能够告诉我很多其它经常使用的小技巧啦~一起进步 1.去除多余的列表线条 ...

  2. 【Java】监控远程服务器JVM

    今天在用JMeter进行测试的时候,发现线程并发量到50的时候会导致阻塞情况,于是需要监控远程JVM,那么如何监控远程JVM呢? 首先,找到启动计量引擎的sh文件,例如我目前的计量引擎启停文件为str ...

  3. logback-spring.xml配置示例

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <include r ...

  4. Eclipe快捷键

    常用的快捷键其实不多,但是用的少了又忘记了,所以讲常用的快捷键整理一下,方便以后自己来看. Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Q 定位到最后 ...

  5. 创建第一个servlet程序--HelloServlet

    这篇文章是用来纪念我第一次创建一个Servlet程序,步骤我会写得详细点,也可以参考一下,后续我会将SpringMVC 跟ssh的搭建分别更新(ps:不忙的话我会更新) 工具:java jdk 1.6 ...

  6. nginx 代理静态资源报 403

    用tomcat跑了一个上传服务,文件上传到指定nginx的html目录,用nginx来代理静态资源,结果上传能够成功,访问却报403. 解决办法,将html的拥有者改成nobody: chown -R ...

  7. ubuntu直接删除文件而不是移动到回收站

    如你所知,你可以在文件(或者文件夹)上面点击右键选择“移动到删除文件夹”或者把它拖动到屏幕右下角的回收站里面来上传文件.唯一的问题是,在回收站里面的文件除非你手工清理不然不会自动清除,这可能导致安全问 ...

  8. Mac系统清理、占用空间大、空间不够、查看系统文件大小分布

    背景: 最近老提示空间不够,很尴尬,一直弹系统提示 如图,256的空间,就剩下几个G了,其中最大头的系统占用:160G,占比60%多 正常情况下:我们可以点击管理,进入到系统磁盘优化界面: 这种适用于 ...

  9. coreData详解

    1.初识CoreData CoreData的结构构成: NSManagedObjectModel的构成: 可以通过Entity创建继承自NSManagedObject类的文件,这个文件就是开发中使用的 ...

  10. zabbix主动被动模式说明/区别

    说明:使用zabbix代理有很多好处,一方面可以监控不可达的远程区域:另一方面当监控项目数以万计的时候使用代理可以有效分担zabbix server压力,也简化分布式监控的维护. 具体:主动.被动模式 ...