首页 > 代码库 > （巧用）事件代理

（巧用）事件代理

2024-07-14 15:56:00   222人阅读

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

 


联系
我们