【例】五子棋,单次点击为黑色,偶次点击为白色。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. js:捕获冒泡和事件委托

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

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

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

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

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

  7. js_事件委托

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

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

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

  9. js中的事件委托详解

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

  10. [转] js中的事件委托或是事件代理详解

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

随机推荐

  1. phpMyAdmin 登陆需要密码

    网页设计从事者在学习网页时都用过 "xampp" 这款软件吧. 本人今天正常使用时,系统提示可升级 phpMyAdmin.当前最新版本为:phpMyAdmin-4.6.4-all- ...

  2. ACdream 1104 瑶瑶想找回文串(SplayTree + Hash + 二分)

    Problem Description 刚学完后缀数组求回文串的瑶瑶(tsyao)想到了另一个问题:如果能够对字符串做一些修改,怎么在每次询问时知道以某个字符为中心的最长回文串长度呢?因为瑶瑶整天只知 ...

  3. 使用rapid-framework自动生成struct2

    在JavaWeb的开发中,对数据对象的操作不外乎增删改查,不同的数据对象,其action.service.model.jsp等都比较类似,如果手动去写这些代码,工作量大且非常繁琐.一个心高气傲的程序员 ...

  4. iOS中的固定 高度

    iOS键盘高度   英文 216(不带联想功能) 英文 252(带联想功能)  中文 252 系统自带表情键盘的高度是 253   在使用系统键盘的时候,如果遇到输入框被键盘挡住的情况 就要用通知中心 ...

  5. mailto调用本地默认客户端发邮件

    下面介绍如何利用 Mailto功能: 实现 Mailto的基本html代码: <a href="mailto:123@qq.com">点击这里发邮件!</a> ...

  6. C语言函数与程序结构

    title : C语言函数与程序结构 tags : C语言作用域规则 , 外部变量 ,静态变量 ,寄存器变量,宏定义 grammar_cjkRuby: true --- 外部变量 变量声明用于说明变量 ...

  7. 乌龙之Ignoring query to other database问题

    问题现象: [root@zxdb05 ~]# mysql -root -pEnter password: Welcome to the MySQL monitor.  Commands end wit ...

  8. C++类默认函数

    问题,which is true??? 每个类都有一个无参构造函数 每个类都有一个拷贝构造函数 每个类可以有多个构造函数 每个类可以多个析构函数 默认构造函数   析构函数   拷贝构造函数   赋值 ...

  9. IdUDPServer中文汉字乱码 及IdTCPClient

    官网 http://www.indyproject.org/docsite/html/frames.html?frmname=topic&frmfile=TIdTCPServer_OnExec ...

  10. Fragment 实现拍照,相册选图,设置头像功能

    设置不成功,http://bbs.csdn.net/topics/391112964 采纳问题回答:这个是fragment没有收到这个回调,原因不多说了,,,你用你对应的ragment.startAc ...