（巧用）事件代理

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_30737433

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/imsomnus/p/3875491.html

版权

每一个javascript事件（例如：click，mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时这点会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

$(".myTable td").click(function(){
    $(this).css("background","red");
});

假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。那么有什么更好的方式呢？

代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，然后通过 event.target 获取到点击的当前元素，代码如下：

$(".myTable").click(function(e){
        var $click=$(e.target); //e.target捕捉到触发的目标元素；
        $click.css("background","red");
});

在改进方式中，你只为一个元素绑定了1个事件，显然，这种方式的性能要优于之前那种。同时，在jquery1.7之后版本提供了一个新的方式on(),来帮助你将整个事件监听封装到一个便利方法中，如下所示：

$(".myTable").on("click","td",function(){
    $(this).css("background","red");
});

巧妙运用事件代理的方式会写出更好的代码。举个比较全的栗子，细细品味一下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件代理</title>
    <style>
        table{border-collapse: collapse;}
        td,th{border:1px solid #ccc;padding:5px 10px;}
        .muUl{border:1px solid blue;}
        .muUl li{border:1px solid #ccc;padding:5px 10px;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <table class="myTable">
        <tr><th>姓名</th><th>班级</th><th>年龄</th></tr>
        <tr>
            <td>张三</td>
            <td>四年级1班</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>四年级1班</td>
            <td>10</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>四年级1班</td>
            <td>10</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>四年级1班</td>
            <td>10</td>
        </tr>
    </table>
    <ul class="muUl">
        <li><a href="javascript:;">你好</a></li>
        <li>我好</li>
        <li>大家好</li>
        <li>我勒个去</li>
        <li>好吧</li>
    </ul>
    <script>
        $(function(){
            $(".myTable").click(function(e){
                var $click=$(e.target); //e.target捕捉到触发的目标元素；
                $click.css("background","red");
            });

            $(".muUl").click(function(e){
                var $this =$(e.target);
                $this.css("background","green");
            });
        });
    </script>
</body>
</html>