js动态添加事件-事件委托

时间 2019-12-07

原文原文链接

做者：白狼出处：http://www.manks.top/javascri... 本文版权归做者，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。
其所谓的动态添加事件实质就是指js中的事件委托。javascript

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

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

解决这一问题的核心就是利用js的委托事件。委派事件的优点就是能够给未存在的元素绑定事件，并且委派事件每每开销也会更小！ajax

题外话：举一个最简单的例子：当页面上有1000个div的时候，若是直接给div绑定click事件，其会为1000个元素绑定事件。可是，若是用事件委托，只须要一个元素绑定事件便可。PS:但愿啰里啰嗦可以让你明白事件委托的含义。app

咱们只是想知道动态建立的元素如何添加事件，你说这么多作什么，作什么...网站

好吧，言归正传，看具体实现：spa

// 模拟动态建立元素li
$.ajax({
    type: 'get',
    data: {},
    success: function () {                
        $('<li>').addClass('aaa').html('11111111').appendTo($('body'));
    },
});

<span class="redactor-invisible-space">// 给为咱们刚刚动态建立的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
    console.log('ddd');
});</span>

[考虑目前国内网站大部分采集文章十分频繁，更有甚者不注明原文出处，原做者更但愿看客们查看原文，以防有任何问题不能更新全部文章，避免误导！]
查看原文code