JS 事件委托

序言

这是我曾经面试的时候遇到过的一道面试题。非常基础，而且出现频率奇高，所以就留心总结一下。原题目如下：

1到100个节点，点击其中任意一个节点，弹出节点所在的序号。

问题就是如此之简单直接，但我对这扑面而来的题目似乎还没有能力完全做好准备。回想起当时的能力真是渣到醉的不行。不过“二哈”的我把这点当做一个需要我努力的理由。

既然已经很差了，学一点也不会比现在更差。放弃什么的，就真的一点希望都没有了。

说了这么多都偏题了，下面我们直接讨论代码吧。

完成与进阶

原始代码

我当时所编写的代码如下，代码已经过测试，可实现题目要求。现在想想我当时好渣啊，写的代码让现在的我不忍直视。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我点的到底是谁呢</title>
    <style>
    .node {
        width: 200px;
        height: 50px;
        line-height: 50px;
        background: #ed145b;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="node" onclick="showIndex(this);">有本事点我啊</div>
    <div class="node" onclick="showIndex(this);">有本事点我啊</div>
    <div class="node" onclick="showIndex(this);">有本事点我啊</div>
    <div class="node" onclick="showIndex(this);">有本事点我啊</div>
    <div class="node" onclick="showIndex(this);">有本事点我啊</div>
    <!-- 写五个意思一下就好啦，话说复制粘贴感觉好爽啊，根本停不下来！！ -->
    <script>
    function showIndex(obj) {
        var oDiv = document.getElementsByTagName("div"),
            count = oDiv.length;
        for (var i = 0; i < count; i++) {
            if (oDiv[i] == obj) {
                alert(i + 1);
            }
        }
    }
    </script>
</body>
</html>

这么做确实完成了题目所叙述的功能，但是这代码看起来并不优美。现在来改进一下这渣渣的js代码，最起码不要让事件注册以onclick这种方式写在html标签里面，看着好不爽呀！

有一些问题的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断点击的是哪个div</title>
    <style>
    .node {
        width: 200px;
        height: 50px;
        line-height: 50px;
        background: #ed145b;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <script>
    var oDiv = document.getElementsByClassName("node");
    for (var i = 0; i < oDiv.length; i++) {
        oDiv[i].onclick = function() {
            alert(i);
        }
    }
    </script>
</body>
</html>

本想就这么蒙混过关，但是聪明的读者在认真看了上面的改进代码后，一定会一顿@我“你妹啊，运行结果果断不对啊！”

确实不对，因为无论点击哪个div弹出的结果都是5。这是为什么呢？我先不解释，我要卖个关子，我现在要在代码里面加入点匿名自执行函数。

改进后的代码

变量的作用域是js的一个非常重要的概念。相信很多同学理解起来都不是很难，但是也并不是说所有人都懂得的东东。不信，看看下面的代码，解释一下为什么这么做就不会有问题了吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断点击的是哪个div</title>
    <style>
    .node {
        width: 200px;
        height: 50px;
        line-height: 50px;
        background: #ed145b;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <div class="node">有本事你点我啊</div>
    <script>
    var oDiv = document.getElementsByClassName("node");
    for (var i = 0; i < oDiv.length; i++) {
        (function(i) {
            oDiv[i].onclick = function() {
                alert(i);
            }
        })(i)
    }
    </script>
</body>
</html>

就算我不说你们也都知道的事情

当改进过代码之后，变量i的作用域的发生了改变。之前每一次循环中的变量i都是共享的，但是被包裹起来之后，就彼此独立咯~问题也就解决咯~喜大普奔啊！

使用一下js类库吧

上面的原生js固然可以实现功能，但是不够精简。而且很多时候，我们在工作中都会使用一些js类库，比如：jQuery，Zpeto（移动端使用）什么的。所以在此也贴上jQuery实现该功能的代码。

$('.node').on('click', function(e) {
    alert($(this).index());
});

这样一来代码便简洁了很多，对于拥有代码洁癖的我来说，这实在是太舒爽了，哈哈哈！

JS 事件委托

序言

完成与进阶

原始代码

有一些问题的代码

改进后的代码

就算我不说你们也都知道的事情

使用一下js类库吧

ChanceWong

引用和评论

Hexo 建站之旅

深入了解浏览器渲染进程的工作方式

Go 错误处理指北：pkg/errors 源码解读

Java灵魂拷问13个为什么，你都会哪些？

腾讯秋招面试，人麻了。。。

Go 错误处理指北：Defer、Panic、Recover 三剑客

得物一面，都是非常经典的问题