javascript – 事件委托成为有价值需要多少元素?

阅读另一个关于jQuery性能的SO问题,我开始考虑到使用事件委托而不是单独绑定到元素时的重点.我主要是关于jQuery,但我想这可能适用于 Javascript一般.

事件委托有两个主要目的:

>允许处理程序处理尚未创建/插入DOM的元素.
>将一个函数绑定到一个共同的祖先元素而不是多个兄弟元素

我的问题是其中第二个.一般答案可能是“这取决于具体的情况”,但是我想知道是否有经验法则或基准测试方式来测试这一点.

所以,问题是:在事件委托的性能优势超过性能成本之前,您需要多少元素?

解决方法

假设这个HTML结构:
<ul id="navUL">
    <li><a href="one.html">One</a></li>
    <li><a href="two.html">Two</a></li>
    <li><a href="three.html">Three</a></li>
</ul>

只是为了清除事情(对我来说)….根据jQuery docs(http://api.jquery.com/delegate/),这个:

$("#navUL").delegate("a","click",function(){
    // anchor clicked
});

…相当于:

$("#navUL").each(function(){
    $("a",this).live("click",function(){
        // anchor clicked
    });
});

然而,事件委托(据我所知)是这样的:

$("#navUL").click(function(e) {
    if (e.target.nodeName !== "A") { return false; }
    // anchor clicked
    // anchor is referenced by e.target
});

所以你捕获UL元素上的点击事件,然后通过event.target属性找出实际点击哪个锚点.

我不知道delegate()方法,但是最后一个方法应该总是比将事件处理函数附加到#navUL元素中的每个锚点上更快,就像这样:

$("#navUL a").click(function() {
    // anchor clicked
    // anchor is referenced by the this value
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)