【例】五子棋，单次点击为黑色，偶次点击为白色。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. Android之jni深入

    小技巧:自动生成 java本地方法对应的c代码的方法名 javah 指令 +全类名 java1.6版本 class C:\workspace\HelloWorldFromC2\bin\classes ...

  2. Myeclipse中把java代码导成UML类图

    Myeclipse中把java代码导成UML类图 1.右键点击项目名称,选择New-------àUML2 Model 2.给类图命名 3.导成类图 1)如果要把整个项目导成类图,则把整个项目拖到类图 ...

  3. Hibernate日常应用的相关问题

    1.在控制台中显示Hibernate打印的SQL中的参数 默认情况下,hibernate的sql中都是以问号代表参数,并没有显示参数的真实值,但是也不是做不到,只需要两步配置就可以显示出参数的真实值了 ...

  4. .net学习之.net和C#关系、运行过程、数据类型、类型转换、值类型和引用类型、数组以及方法参数等

    1..net 和 C# 的关系.net 是一个平台,C#是种语言,C#语言可以通过.net平台来编写.部署.运行.net应用程序,C#通过.net平台开发.net应用程序2..net平台的重要组成FC ...

  5. mysql忘记密码修改方法

    1.干掉mysqld进程 kill -TERM mysqld 2.使用下面命令启动mysqld /usr/bin/mysqld_safe --skip-grant-tables & 3.新开一 ...

  6. UML中的依赖关系

    UML中的五种关系和设计模式中的代码实现. 又重新听了一遍UML中的关系.感觉又是收获很大. UML中的关系有依赖,关联(聚合,组合),泛化(也叫继承),实现 现在一个一个的来实现: 一:依赖 依赖关 ...

  7. 【codevs1191】数轴染色 线段树 区间修改+固定区间查询

    [codevs1191]数轴染色 2014年2月15日4317 题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[L ...

  8. JavaScript案例六：简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  9. BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍

    BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍 你进入BeagleBone世界的第一步就是将它连接以得到命令提示,然后你就可以处理文件以及执行命令了.在这里,你就可以定制你 ...

  10. 2015CCPC小记

    距离第一届CCPC也正好一星期了,突然想到还没写总结,现在补上.做为刚度过大一的我,能有机会去参加国赛是很激动的.周五下午出发,坐了13个小时的火车抵达南阳,南阳不算大城市,有点落后,但是这里的人很热 ...