网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 老生常谈js动态添加事件-事件委托
范文
    下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
    其所谓的动态添加事件实质就是指js中的事件委托。
    我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理?
    为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。
    解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小!
    题外话:举一个最简单的例子:当页面上有1000个div的时候,如果直接给div绑定click事件,其会为1000个元素绑定事件。但是,如果用事件委托,只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。
    我们只是想知道动态创建的元素如何添加事件,你说这么多做什么,做什么...
    好吧,言归正传,看具体实现:
    // 模拟动态创建元素li
    $.ajax({
      type: 'get',
      data: {},
      success: function () {        
        $('<li>').addClass('aaa').html('11111111').appendTo($('body'));
      },
    });
    // 给为我们刚刚动态创建的元素添加事件
    $(document).on('click', 'li[class=aaa]', function(){
      console.log('ddd');
    });
    以上这篇老生常谈js动态添加事件--- 事件委托就是小编分享给大家的全部内容了,希望能给大家一个参考
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/23 6:42:13