• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 事件代理如何使用?代码怎么写?

发布时间:2022-01-06 11:46:12 浏览 1132 来源:博学谷 作者:小谷

    事件代理如何使用?代码怎么写?事件代理就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素。在 JavaScript中的事件委托又称事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序管理某一类型的所有事件。

    学习目标:能够知道事件代理的使用方式

    1. 什么是事件代理?

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

    事件冒泡代码:

    
     <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,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。

    2. 事件代理如何使用?

    一般绑定事件的写法:

    $(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'

    unction: 当事件触发执行的函数

    3. 事件代理小结

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

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 常用的jQuery事件有几种?分别是什么? 下一篇: Ajax Web数据交互方式有什么作用?怎么用?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码