| 标题 | JavaScript动态添加事件之事件委托 |
| 内容 | 先给大家讲下什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 其所谓的动态添加事件实质就是指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'); }); 以上所述是小编给大家介绍的JavaScript动态添加事件之事件委托，希望对大家有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。