老生常谈js动态添加事件--- 事件委托

 更新时间:2016年07月19日 09:57:43   投稿:jingxian   我要评论
下面小编就为大家带来一篇老生常谈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动态添加事件--- 事件委托就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript之对系统的toFixed()方法的修正

    javascript之对系统的toFixed()方法的修正

    javascript之对系统的toFixed()方法的修正...
    2007-05-05
  • JavaScript计时器示例分析

    JavaScript计时器示例分析

    这篇文章主要介绍了JavaScript计时器示例分析,需要的朋友可以参考下
    2015-02-02
  • Bootstrap3 内联单选和多选框

    Bootstrap3 内联单选和多选框

    这篇文章主要介绍了Bootstrap3 内联单选和多选框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • asp知识整理笔记3(问答模式)

    asp知识整理笔记3(问答模式)

    这是关于asp知识整理的第二份笔记,只有把最基础的问题搞清楚了,才能更好的学习ASP编程。
    2015-09-09
  • JavaScript 对象深入学习总结(经典)

    JavaScript 对象深入学习总结(经典)

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢?本篇文章给大家分享javascript对象深入学习总结,小伙伴们跟着小编一起深入学习吧
    2015-09-09
  • JavaScript迭代器的含义及用法

    JavaScript迭代器的含义及用法

    这篇文章主要介绍了JavaScript迭代器的含义及用法,迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作。,需要的朋友可以参考下
    2019-06-06
  • Js冒泡事件详解及阻止示例

    Js冒泡事件详解及阻止示例

    如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播
    2014-03-03
  • JavaScript定义及输出螺旋矩阵的方法详解

    JavaScript定义及输出螺旋矩阵的方法详解

    这篇文章主要介绍了JavaScript定义及输出螺旋矩阵的方法,简单描述了螺旋矩阵的概念、原理并结合实例形式分析了javascript定义与输出螺旋矩阵的具体操作技巧,需要的朋友可以参考下
    2017-12-12
  • 用Javascript同时提交多个Web表单的方法

    用Javascript同时提交多个Web表单的方法

    使用Javascript同时提交多个Web表单的方法
    2009-12-12
  • 微信小程序图表插件wx-charts用法实例详解

    微信小程序图表插件wx-charts用法实例详解

    这篇文章主要介绍了微信小程序图表插件wx-charts用法,结合实例形式较为详细的总结分析了微信小程序图表插件wx-charts的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05

最新评论