JS 事件委托

时间 2019-11-16

标签事件委托栏目 JavaScript 繁體版

原文原文链接

序言

这是我曾经面试的时候遇到过的一道面试题。很是基础，并且出现频率奇高，因此就留心总结一下。原题目以下：html

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

问题就是如此之简单直接，但我对这扑面而来的题目彷佛尚未能力彻底作好准备。回想起当时的能力真是渣到醉的不行。不过“二哈”的我把这点当作一个须要我努力的理由。面试

既然已经不好了，学一点也不会比如今更差。放弃什么的，就真的一点但愿都没有了。函数

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

完成与进阶

原始代码

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

<!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标签里面，看着好不爽呀！code

有一些问题的代码

<!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>

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

确实不对，由于不管点击哪一个div弹出的结果都是5。这是为何呢？我先不解释，我要卖个关子，我如今要在代码里面加入点匿名自执行函数。事件

改进后的代码

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

<!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());
});

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