【例】五子棋，单次点击为黑色，偶次点击为白色。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）事件委托的更多相关文章

  1. javascript 冒泡和事件源 形成的事件委托

    冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2 ...

  2. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  3. JavaScript事件代理和事件委托

    一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...

  4. JavaScript中的事件委托（转至大佬）

    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...

  5. js：捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  6. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  7. js之捕捉冒泡和事件委托

     以下为转载内容 一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...

  8. js_事件委托

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  9. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  10. js中的事件委托详解

    概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位 ...

随机推荐

  1. cf112a(水题)

    题目很简单..不过题意好像有点难懂... 题意:判定一个数能否被一个幸运数整除,循环一遍4到n/4,若存在i为幸运数且被n整除输出yes,反之输出no... 代码如下: #include <bi ...

  2. Set和Map

    Set和Map

  3. 模型验证组件——FluentValidation

    之前在博客园有幸从网友那里得知一个C#的模型验证组件(哈 不知道这样表述正确不),组件的功能比较简单,主要是实现了对Model的验证,例如验证用户名是否为空,密码长度是不是多余6个字符,当然还有其他更 ...

  4. VIM Tutorials----（updating）

    This is my first English tutorial; I hope I can help you to learn VIM. Any question send email to me ...

  5. Windows计数器做性能监控（window server 2008服务器）

    使用Windows计数器 一.创建数据收集器集 二.创建数据收集器 三.使用数据收集器 1.修改数据收集器的属性 2.手动启用.手动停止数据收集器集 3.计划任务 4.在性能监视器中查看 一.性能监视 ...

  6. Lock的基础概念

    锁的相关概念 1.可重入锁 如果锁具备可重入性,则称作为可重入锁.像synchronized和ReentrantLock都是可重入锁,可重入性在我看来实际上表明了锁的分配机制:基于线程的分配,而不是基 ...

  7. swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程

    swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程 1.2.3  注册非免费苹果账号swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程 免费的苹果账号在 ...

  8. 递推DP URAL 1119 Metro

    题目传送门 /* 题意:已知起点(1,1),终点(n,m):从一个点水平或垂直走到相邻的点距离+1,还有k个抄近道的对角线+sqrt (2.0): 递推DP:仿照JayYe,处理的很巧妙,学习:) 好 ...

  9. Remainder

    Remainder Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  10. BZOJ4299 : Codechef FRBSUM

    若$[0,i]$的数都可以得到,那么$[1,所有不大于i+1的数的和]$的数都可以得到. 如此暴力枚举答案,用可持久化线段树支持查询,因为每次数字至少翻一倍,所以复杂度为$O(m\log^2n)$. ...