Javascript 笔记与总结（2-17）事件委托
【例】五子棋，单次点击为黑色，偶次点击为白色。e.target 的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:400px;
height:400px;
border:0;
border-collapse: collapse;
background:orange;
} td{
border: 1px solid gray;
cursor:pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
var num = 0; //计数器
document.getElementsByTagName("table")[0].onclick = function(e){
//alert(e.target); //[object HTMLTableCellElement]
//console.log(e.target); //<td></td>
e.target.style.background = num++%2?"white":"black"; //单数为黑色，偶数为白色
} </script>
</html>
把 td 的点击事件交给 table ，即把事件处理委托给 table，事件委托。
【附：技巧】sublime （text2 | text3）快速写表格
table>tr*5>td*5
生成 5 行 5 列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Javascript 笔记与总结（2-17）事件委托的更多相关文章
- javascript 冒泡和事件源 形成的事件委托
冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript事件代理和事件委托
一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
- JavaScript中的事件委托（转至大佬）
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- js：捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
- js之捕捉冒泡和事件委托
以下为转载内容 一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...
- js_事件委托
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js中的事件委托详解
概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位 ...
随机推荐
- DB，Cache和Redis应用场景分析
最近做一产品,微博方面的.数据存储同时用到了DB(mysql),Cache(memcache),Redis.其实最开始架构设计的时候是准备用MongoDB的,由于学习成本太高,最终选择放弃了,采用了比 ...
- loj 1168(Tarjan应用)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26882 思路:一开始把题意理解错了,还以为是简单路径,然后仔细一看 ...
- 判断checkbox是否被选中事件
第一种////////////////////////////////////////////////////////<input type="checkbox" value ...
- win7下loadrunner创建mysql数据库参数化问题解决
问题现象: 安装mysql数据源驱动后,lr创建mysql驱动程序列表没有安装的驱动程序: 安装完mysql ODBC数据源后 2.在控制面板-数据源(ODBC) 3.创建mysql数据源: 4.从l ...
- Web测试Selenium:如何选取元素
Web测试工具Selenium:如何选取元素 2009-02-17 23:23 by 敏捷的水, 5372 阅读, 22 评论, 收藏, 编辑 selenium是一个非常棒的Web测试工具,他对Aja ...
- JDK QUEUE队列
Java Queue基础 Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构. offer,add区别: 一些队列有大小限制,因此如果想在一个满的队列中加入一个新项,多出的项就会被 ...
- http://www.roncoo.com/article/detail/124822
http://www.roncoo.com/article/detail/124822
- 最短路(Bellman_Ford) POJ 3259 Wormholes
题目传送门 /* 题意:一张有双方向连通和单方向连通的图,单方向的是负权值,问是否能回到过去(权值和为负) Bellman_Ford:循环n-1次松弛操作,再判断是否存在负权回路(因为如果有会一直减下 ...
- 获取RenderedGeometry不对的处理
如果是在代码中添加的形状,获取Shape.RenderedGeometry会出错. 这是由于WPF没有更新形状的原因,调用Shape.Arrange()后问题解决.
- C# params参数的应用
为了将方法声明为可以接受可变数量参数的方法,我们可以使用params关键字来声明数组,如下所示: public static Int32Add(params Int32[] values) { Int ...