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

181 阅读 0 评论 120 点赞

我是靠谱客的博主包容冰棍，最近开发中收集的这篇文章主要介绍老生常谈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动态添加事件--- 事件委托就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。