博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js动态添加事件-事件委托
阅读量:7228 次
发布时间:2019-06-29

本文共 856 字,大约阅读时间需要 2 分钟。

  hot3.png

作者:白狼 出处: 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 其所谓的动态添加事件实质就是指js中的事件委托。

我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理?

为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。

解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小!

题外话:举一个最简单的例子:当页面上有1000个div的时候,如果直接给div绑定click事件,其会为1000个元素绑定事件。但是,如果用事件委托,只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。

我们只是想知道动态创建的元素如何添加事件,你说这么多做什么,做什么...

好吧,言归正传,看具体实现:

// 模拟动态创建元素li$.ajax({    type: 'get',    data: {},    success: function () {                        $('
  • ').addClass('aaa').html('11111111').appendTo($('body')); },});// 给为我们刚刚动态创建的元素添加事件$(document).on('click', 'li[class=aaa]', function(){ console.log('ddd');});
  • [考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]

    转载于:https://my.oschina.net/manks/blog/747390

    你可能感兴趣的文章
    深入浅出iOS事件机制
    查看>>
    hadoop理解
    查看>>
    Oracle——18用户、角色和权限信息的视图总结
    查看>>
    WordPress 中的 Debug 模式(调试模式)
    查看>>
    node下使用express框架,ejs模板引擎
    查看>>
    搜索:文本的匹配算法
    查看>>
    Fedora 17 LibreOffice 办公套件的安装与汉化
    查看>>
    scrollview不充满屏幕的原因
    查看>>
    PHP单例模式
    查看>>
    解密敏捷自动化测试
    查看>>
    DelphiMVC拦截器介绍
    查看>>
    Spring Cloud构建微服务架构:分布式配置中心【Dalston版】
    查看>>
    iOS 11正式版终于来了!强力助攻小程序
    查看>>
    开放平台API接口调用频率控制系统设计浅谈
    查看>>
    Lucene4.3进阶开发之潜龙勿用( 七)
    查看>>
    DTD和schema小总结
    查看>>
    去掉导航栏的黑线
    查看>>
    怎样让html加载完毕后加载js代码
    查看>>
    piwik 案例介绍
    查看>>
    敏感字过滤
    查看>>