美文网首页
事件委托

事件委托

作者: 飘零_0f71 | 来源:发表于2019-04-11 19:26 被阅读0次

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

    一般绑定事件的写法

    $(function(){

        $ali = $('#list li');

        $ali.click(function(event) {

            $(this).css({background:'red'});

        });

    })

    <ul id="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    事件委托的写法

    $(function(){

        $list = $('#list');

        $list.delegate('li', 'click', function(event) {

            $(this).css({background:'red'});

        });

    })

    <ul id="list">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    取消事件委托

    // ev.delegateTarge 委托对象

    $(ev.delegateTarge).undelegate();

    // 上面的例子可使用 $list.undelegate();

    相关文章

      网友评论

          本文标题:事件委托

          本文链接:https://www.haomeiwen.com/subject/umpaiqtx.html