前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery事件代理

jQuery事件代理

原创
作者头像
落雨
发布2022-03-01 16:48:38
30K0
发布2022-03-01 16:48:38
举报
文章被收录于专栏:落雨的专栏

1. 事件代理介绍

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

事件冒泡代码:

代码语言:javascript
复制
 <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. 事件代理的使用

一般绑定事件的写法:

代码语言:javascript
复制
$(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>

事件代理的写法

代码语言:javascript
复制
$(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: 当事件触发执行的函数

3. 小结

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 事件代理介绍
    • 事件冒泡代码:
      • 说明:
      • 2. 事件代理的使用
        • 一般绑定事件的写法:
          • 事件代理的写法
            • delegate方法参数说明:
            • 3. 小结
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档