【例】五子棋，单次点击为黑色，偶次点击为白色。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. Rational Rose2007（v7.0）下载地址、安装及激活详解教程（图）

    http://blog.csdn.net/skl_tz/article/details/8925152 最近需要画uml图,之前用的是Rose 2003版的,由于好久没进去了,结果发现原来的激活又失效 ...

  2. Groovy安装配置

    一.介绍 Groovy是可以运行在 Java 平台上进行动态语言,使用方式基本与使用 Java 的方式相同,Groovy和java基本是可以实现无缝整合,它有以下一些特性: 是一个基于Java虚拟机的 ...

  3. Java Hour 32 Weather ( 5 ) struts2 – Action class

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 32 Struts2 Action 1 将action 映射到 ac ...

  4. Syncfusion的社区许可及免费电子书和白皮书

    今晚由于要忙于其他事情,就简单的给大家推荐一个第三方组件库.特别注明:这是我义务为这家公司打广告.毕竟我从他们公司收获了很多知识. Syncfusion是一家微软生态下的第三方组件/控件供应商,算是后 ...

  5. eclipse常用快捷键，这个只要新学会的常用的会陆续更新的。

    1.Ctrl+Shift+O     引用包 2.Ctrl+Shift+F      格式化代码 3.Ctrl + /  注释和解除注释代码 4.Ctrl+M  代码最大最小化 5.ctrl+shif ...

  6. SparkStreaming+Flume出现ERROR ReceiverTracker: Deregistered receiver for stream 0: Error starting receiver 0 - org.jboss.netty.channel.ChannelException

    文章发自http://www.cnblogs.com/hark0623/p/4204104.html ,转载请注明 我发现太多太多的坑要趟了… 向yarn提交sparkstreaming了,提交脚本如 ...

  7. JNI常见错误1

    1, java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "signal" referenced ...

  8. Objective-C专题，是学习iOS开发的前奏（转）

    第一个OC的类 来源:http://www.cnblogs.com/mjios/archive/2013/04/06/3002814.html 本文目录 一.语法简介 二.用Xcode创建第一个OC的 ...

  9. linux中使用top获取进程的资源占用信息

    在linux中使用top获取进程的资源占用信息: Cpu(s):  1.0%us,  0.0%sy,  0.0%ni, 98.3%id,  0.7%wa,  0.0%hi,  0.0%si,  0.0 ...

  10. mvc-1mvc和类(2)

    添加私有函数 var Person = function() {}; (function() { var findById = function(){}; Person.find = function ...