【例】五子棋,单次点击为黑色,偶次点击为白色。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_事件委托

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

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

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

  8. js中的事件委托详解

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

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

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

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

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

随机推荐

  1. js的回调函数 一些例子

    这边用bootstrap 3.0的  上传控件做例子 下面是上传控件的一段完整的 js 操作 代码. <!-- 上传缩略图控件配置 --><script> // 定义这四个全局 ...

  2. 函数调用方式__stdcall、__cdel

    函数调用方式关系对比如下: 关键字 调用规则 参数传递方向 返回 参数寄存器 堆栈的清除 __cdecl C语言 从右向左 EAX 无 调用者 __stdcall Win32标准  从右向左 EAX ...

  3. NDK 的开发流程

    1.NDK开发所需要的工具 windows 需要在windows下的环境 把c代码打包成 手机能用的函数库 首先模拟手机的环境 1 NDK .sh linux 批处理文件 .bat windows 头 ...

  4. Codeforces 389A (最大公约数)

    Fox and Number Game Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u ...

  5. 关于Linux系统basename函数缺陷的思考

    某模块作为前台进程独立运行时,运行命令携带命令行参数:作为某平台下守护进程子进程运行时,需要将命令行参数固化在代码里.类似如下写法: char *argv[] = {"./DslDriver ...

  6. CentOS 6.6 nginx PHP 配置

    /************************************************************************* * CentOS 6.6 nginx PHP 配置 ...

  7. BZOJ 3039: 玉蟾宫

    3039: 玉蟾宫 Description 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 这片土地被分成N*M个格子,每个 ...

  8. 201521123016 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 2.1代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  9. vue基础学习(三)

    03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...

  10. Go命令官方指南【原译】

    启动错误报告 编译包和依赖项 删除目标文件和缓存的文件 显示包或符号的文档 打印Go环境信息 更新包以使用新API Gofmt(重新格式化)包源 通过处理源生成Go文件 下载并安装包和依赖项 编译并安 ...