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修改 ...
随机推荐
- Dockerfile 构建后端springboot应用并用shell脚本实现jenkins自动构建
Dockerfile 文件构建docker镜像 FROM centos MAINTAINER zh*****eng "z*******ch.cn" ENV LANG en_US.U ...
- docker build 指定dockerfile
1. Dockerfile文件使用 docker build命令会根据Dockerfile文件及上下文构建新Docker镜像.构建上下文是指Dockerfile所在的本地路径或一个URL(Git仓库地 ...
- ios中LeveyPopListView 弹出view的用法
下载地址https://github.com/levey/LeveyPopListView 是arc, 如果是非arc项目要设置一下 方法 选中工程->TARGETS->相应的targe ...
- 解决编译Apache出现的问题：configure: error: APR not found
今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... noconfigure: error: APR not fou ...
- Ubuntu菜鸟入门（十三）—— 切换软件源
默认中国服务器,我们把它切换成aliyun的. 在设置--软件和更新里--下载自--其他站点--中国--http://mirrors.aliyun.com/ubuntu 先把所有软件源和软件更新到最新 ...
- ubuntu(14.04) 下配置重写
1.开启rewrite模块,使用命令:a2enmod rewrite 2.在apache2.conf,配置你网站的目录(是目录而定)
- 【Windows】DOS的常用命令
cmd[[{/c|/k}][/s][/q][/d][{/a|/u}][/t:fg][/e:{on|off}][/f:{on|off}][/v:{on|off}]string] 参数 /c 执行stri ...
- JDBC连接SQLServer出现的异常
数据库连接. question1. java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver 异常 ...
- Fix Backup Database is terminating abnormally When performing a Farm Backup
Problem I am trying to backup SharePoint 2013 Farm Automatically with PowerShell and Windows Task Sc ...
- http1.0 和 http1.1 主要区别
1.背景 KeepAlive是就是通常所称的长连接.KeepAlive带来的好处是可以减少tcp连接的开销,这对于短response body的请求效果更加明显.同时,可以为采用HTTP协议的交互 ...