EasyClick Html UI 第二十二节 jQuery 事件代理

Posted Mr -老鬼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyClick Html UI 第二十二节 jQuery 事件代理相关的知识,希望对你有一定的参考价值。

EasyClick html UI 第二十二节 jQuery 事件代理

事件代理介绍

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

事件冒泡代码:


 <script>
    $(function()

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function()
            alert($(this).html());
        ); 

        $div2.click(function()
            alert($(this).html());
        ); 
    );
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

说明:
当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡

事件代理的使用

一般绑定事件的写法:

$(function()
    $ali = $('#list li');
    $ali.click(function() 
        $(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');
    // 父元素ul 来代理 子元素li的点击事件
    $list.delegate('li', 'click', function() 
        // $(this)表示当前点击的子元素对象
        $(this).css(background:'red');
    );
)

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegate方法参数说明:

delegate(childSelector,event,function)
  • childSelector: 子元素的选择器
  • event: 事件名称,比如: 'click'
  • function: 当事件触发执行的函数

总结

  • 事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。
  • 使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理。
  • 事件代理使用是使用delegate方法来完成

交流QQ群:620028786,647082990,772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明:本文所有的教程仅限交流学习使用不得用于违法用途,造成的法律后果本人不承担责任。

以上是关于EasyClick Html UI 第二十二节 jQuery 事件代理的主要内容,如果未能解决你的问题,请参考以下文章

EasyClick Html UI第二节 初初识常用的html标签

学习vue第二十二节,路由的基本使用方法

EasyClick Html UI 第二十三节ajax

第二十二节 面向对象 简单小结类与对象

centos mysql 实战 第二十二节课

第二十二节——反射