利用委托绑定事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhoujingying22/article/details/53271460

以click点击事件举例(引用Jquery库)

<ul>
    <li>
        <lable>姓名:
            <input type="text" value="" id="name">
        </lable>
        <button type="button" id="nameBtn">按钮1</button>
    </li>
    <li>
        <lable>性别:
            <input type="text" value="" id="sex">
        </lable>
        <button type="button" id="sexBtn">按钮2</button>
    </li>
</ul>

一、传统的写法是
每个需要点击的元素(如按钮等)分别绑定一个点击事件,这种模式其 实是冒泡,从里到外找到元素然后绑定事件。

        $(function () {
           $('#nameBtn').click(function(){//TODO});
           $('#sexBtn').click(function(){//TODO});
        })

缺点:
1、每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。
2、反复操作DOM, 没有优化。

二、委托的写法
只对最外层绑定一个事件,利用委托从外到里,根据属性或id、class,找到需要绑定事件的元素进行绑定

$(function () {
     $('ul').unbind('click').on('click',function (e) {
         var target = e.target;        //保存当前对象
         if(target.id == 'nameBtn'){
             alert($('#name').val());
           }else if(target.id == 'sexBtn'){
             alert($('#sex').val());
           }
             return false;                //取消冒泡
          })
      })

如此就比传统写法节约了内存,提高了性能。

展开阅读全文

没有更多推荐了,返回首页