(巧用)事件代理

每一个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>

 

你可能感兴趣的:(事件)