JavaScript--事件委托--冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
border: 1px solid #ddd;
cursor: pointer;
}
</style>
<script>
/**
* 事件委托：
* 事件委托添加事件，其实并不是直接添加给目标元素，
* 而是往往给父元素添加事件，
* 再通过event.target找到目标元素，
* 判断event.target是否为我们要查找的元素，满足条件执行代码
*
* */
window.onload = function () {
var list = document.getElementById('list');
/*1) 普通for循环注册事件*/
console.time("for循环绑定");
for(var i = 0 ; i < list.length; i++ ) {
list.children[i].index = i;
list.children[i].onclick = function () {
alert("给到全部li注册事件"+this.index)
}
}
console.timeEnd("for循环绑定");
/* 2) 事件委托注册事件
* 事件委托绑定事件其实并不是直接绑定给目标元素
* 而是往往绑定给父元素
* */
console.time('事件委托绑定');
list.onclick = function (event) {
if(event.target.nodeName.toLowerCase() == "li") {
alert("给到全部li注册事件")
}
}
console.timeEnd("事件委托绑定");
}
</script>
</head>
<body>
<ul id="list">
<li>这个是第001个列表</li>
<li>这个是第002个列表</li>
<li>这个是第003个列表</li>
<li>这个是第004个列表</li>
<li>这个是第005个列表</li>
<li>这个是第006个列表</li>
<li>这个是第007个列表</li>
<li>这个是第008个列表</li>
<li>这个是第009个列表</li>
<li>这个是第010个列表</li>
<li>这个是第011个列表</li>
<li>这个是第012个列表</li>
<li>这个是第013个列表</li>
<li>这个是第014个列表</li>
<li>这个是第015个列表</li>
<li>这个是第016个列表</li>
<li>这个是第017个列表</li>
<li>这个是第018个列表</li>
<li>这个是第019个列表</li>
<li>这个是第020个列表</li>
<li>这个是第021个列表</li>
<li>这个是第022个列表</li>
<li>这个是第023个列表</li>
<li>这个是第024个列表</li>
<li>这个是第025个列表</li>
<li>这个是第026个列表</li>
<li>这个是第027个列表</li>
<li>这个是第028个列表</li>
<li>这个是第029个列表</li>
<li>这个是第030个列表</li>
<li>这个是第031个列表</li>
<li>这个是第032个列表</li>
<li>这个是第033个列表</li>
<li>这个是第034个列表</li>
<li>这个是第035个列表</li>
<li>这个是第036个列表</li>
<li>这个是第037个列表</li>
<li>这个是第038个列表</li>
<li>这个是第039个列表</li>
<li>这个是第040个列表</li>
<li>这个是第041个列表</li>
<li>这个是第042个列表</li>
<li>这个是第043个列表</li>
<li>这个是第044个列表</li>
<li>这个是第045个列表</li>
<li>这个是第046个列表</li>
<li>这个是第047个列表</li>
<li>这个是第048个列表</li>
<li>这个是第049个列表</li>
<li>这个是第050个列表</li>
<li>这个是第051个列表</li>
<li>这个是第052个列表</li>
<li>这个是第053个列表</li>
<li>这个是第054个列表</li>
<li>这个是第055个列表</li>
<li>这个是第056个列表</li>
<li>这个是第057个列表</li>
<li>这个是第058个列表</li>
<li>这个是第059个列表</li>
<li>这个是第060个列表</li>
<li>这个是第061个列表</li>
<li>这个是第062个列表</li>
<li>这个是第063个列表</li>
<li>这个是第064个列表</li>
<li>这个是第065个列表</li>
<li>这个是第066个列表</li>
<li>这个是第067个列表</li>
<li>这个是第068个列表</li>
<li>这个是第069个列表</li>
<li>这个是第070个列表</li>
<li>这个是第071个列表</li>
<li>这个是第072个列表</li>
<li>这个是第073个列表</li>
<li>这个是第074个列表</li>
<li>这个是第075个列表</li>
<li>这个是第076个列表</li>
<li>这个是第077个列表</li>
<li>这个是第078个列表</li>
<li>这个是第079个列表</li>
<li>这个是第080个列表</li>
<li>这个是第081个列表</li>
<li>这个是第082个列表</li>
<li>这个是第083个列表</li>
<li>这个是第084个列表</li>
<li>这个是第085个列表</li>
<li>这个是第086个列表</li>
<li>这个是第087个列表</li>
<li>这个是第088个列表</li>
<li>这个是第089个列表</li>
<li>这个是第090个列表</li>
<li>这个是第091个列表</li>
<li>这个是第092个列表</li>
<li>这个是第093个列表</li>
<li>这个是第094个列表</li>
<li>这个是第095个列表</li>
<li>这个是第096个列表</li>
<li>这个是第097个列表</li>
<li>这个是第098个列表</li>
<li>这个是第099个列表</li>
</ul>
</body>
</html>
JavaScript--事件委托--冒泡的更多相关文章
- JavaScript 事件委托的技术原理
如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...
- JavaScript事件委托的技术原理
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
- javascript事件委托机制详解
以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...
- JavaScript 事件委托
JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...
- 关于javaScript事件委托的那些事
今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...
- JavaScript事件捕获冒泡与捕获
事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- 浅析JavaScript事件流——冒泡
一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- Javascript事件委托
事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件未使用事件委托之前: <!DOCTYPE html> <html> <head> &l ...
随机推荐
- 高德地图定位不到 报错 location Error, ErrCode:7, errInfo:KEY错误 请到http://lbs.amap.com/api/android-location-sdk/abouterrorcode/查看错误码说明.
出现该问题的可能是高德地图的配置不准确: 仔细配对一下 看sha1 是否是通过应用签名生成的 要区分发布版的sha1 跟调试版的sha1 是不相同的 (小编我第一次反这种错误的时候 是因为我把高得 ...
- Kubernetes架构介绍
目录 Kubernetes架构 k8s架构图 一.K8S Master节点 API Server Scheduler Controller Manager ETCD 二.K8S Node节点 Kube ...
- 关于CSS3 animation 属性在ie edge浏览器中不能工作
我想要给div边框加一个闪烁,所以我将css中设置如下 给想要闪烁的div加上blink类 这样在firefox,chrome下是正常显示的,但是在ie下box-shadow属性不能被正常的展现 后 ...
- JDK中有关23个经典设计模式的示例
Creational patterns Abstract factory (recognizeable by creational methods returning an abstract/inte ...
- CCS开发指南
第一章 CCS概述 1 1.1 CCS概述 1 1.2 代码生成工具 3 1.3 CCS集成开发环境 5 1.3.1 编辑源程序 5 1.3.2创建应用程序6 1.3.3 调试应用程序 6 1.4 ...
- 隐藏和显示<td>
<td id="ifXc"><input type="text" value="1"></td>隐藏$( ...
- ubuntu下编译安装poco
系统环境: ubuntu版本:Linux jfcai-VirtualBox 4.15.0-29-generic #31-Ubuntu SMP Tue Jul 17 15:39:52 UTC 2018 ...
- Scrapy下载器中间件实现随机请求头和代理ip
一.设置随机请求头 class UAMiddleWare(object): UA_LIST = [ 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; ...
- 责任链模式(Chain of Responsibility、Handler)（请求处理建立链）
(使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有对象处理它为止.) 从名字中看出 ,系统中将会存在多个有类似处理能力的对 ...
- 搭建maven聚合工程包含springboot模块
一.新建一个maven项目 二.删除src 打开pom.xml 补充标签 <packaging>pom</packaging> 新建 <module>brr- ...