先给大家讲下什么是事件委托:通俗的讲,事件就是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动态添加事件之事件委托,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
主要内容:为什么要使用事件委托,事件委托实现原理,事件委托的优点,总结利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托(Event Delegation,也称为“事件代理”),是 JavaScript 中最热门的技术之一。 事件委托就是把原本需要绑定在子元素上的事件(onclick、onkeydown 等)委托给它的父元素,让父元素来监听子元素的冒泡事件,并在子元素发生事件冒泡时找到这个子元素。 举个简单的例子,整个宿舍的同学都需要去取快递,一种方法是让他们
本文向大家介绍JQuery事件委托(适用于给动态生成的脚本元素添加事件),包括了JQuery事件委托(适用于给动态生成的脚本元素添加事件)的使用技巧和注意事项,需要的朋友参考一下 最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。研发也美滋滋的开始开发。 但是,好景不长。。
本文向大家介绍jQuery事件委托之Safari,包括了jQuery事件委托之Safari的使用技巧和注意事项,需要的朋友参考一下 什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 事件委托的原理 事件委托将事件监听绑定在目标元素的父级上,当目标元素响应事件时冒泡到绑定事件的父级上,进
捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。 这个想法是,如果我们有许多以类似方式处理的元素,那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。 在处理程序中,我们获取 event.target 以查看事件实际发生的位置并进行处理。 让我们看一个示例 —— 反映中国古代哲学的 八卦图。 如下所示:在新窗口中打开 在沙箱中打开 其 HTML 如
将事件侦听器添加到可以使用事件委派的元素。 使用 EventTarget.addEventListener() 将一个事件监听器添加到一个元素。 如果提供了 选项对象(opts) 的 target 属性,确保事件目标匹配指定的目标元素,然后通过提供正确的 this 上下文来调用回调。 返回一个对自定义委派函数的引用,以便与 off 一起使用。 忽略 opts ,则默认为非委派行为,并且事件冒泡。
事件 事件:用户与浏览器之间特定的交互瞬间。 事件类型 web浏览器发生的事件有很多类型,不同的类型有着不同的信息。"DOM3级事件"包含有:UI事件、焦点事件、滚轮事件、文本事件、鼠标事件、键盘事件、合成事件、变动事件、变动名称事件等。 UI事件 UI事件指的是那些 不一定与用户操作有关 的事件。DOM规范中留下向后兼容。UI事件包含: load:当页面加载后在window上面触发,当所有框架加