首页 > 代码库 > 事件代理--给多个元素调用同个函数
事件代理--给多个元素调用同个函数
每一个js事件(例如:click、mouseover等)都会冒泡到腹肌节点。当我们需要给多个元素调用同个函数时,这点会很有用。
比如要给一个表格绑定这样的行为:点击td后,把背景色设置为红色,代码如下:
$("#myTable td").click(function(){ $(this).css("background","red"); })
假设有100个td元素,在使用以上方式时,就需要绑定100个事件,这将带来很负面的性能影响。
代替这种效率很差的多元素事件监听的方法就是:只需向它们的父节点绑定一次事件,然后通过event.target获取到点击的当前元素,代码如下:
$("#mytable").click(function (e) { var $clicked = $(e.target); //e.target捕捉到触发的目标元素 $clicked.css("background","red"); });
改进方式中,只为一个元素绑定了1个事件。显然,这种方式的性能要优于之前那种。同时,jQuery 1.7中提供了一个新的方式on(),来将整个事件监听封装到一个便利方法中,如下所示:
$("#mytable").on("click","td",function () { $(this).css("background","red"); });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。