JSFiddle - React, Tailwind, and code Playground

by diguage

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>事件委托和事件绑定示例-速度测试</title>
    </head>
    <body>
        <div id="container" class="clearfix">
            <h3>事件委托和事件绑定示例-速度测试</h3>
            
            <div >
               <h4>点击按钮，测试不同数量元素时，事件绑定和事件委托的处理时间对比</h4>
               <input type="button" id="ele_100" value="100 个元素" />
               <input type="button" id="ele_1000" value="1000 个元素" />
               <input type="button" id="ele_10000" value="10000 个元素" />
               <input type="button" id="ele_100000" value="100000 个元素" />
               <span class="extraTips">（注意：在IE8及其更低版本的IE中，大于等于10000个元素时，会有“假死”现象。）</span>
            </div>
            <div id="left">
                <h4>事件绑定的示例</h4>
                <div id="leftCon" class="clearfix"></div>
            </div>

            <div id="right">
                <h4>事件委托的示例</h4>
                <div id="rightCon" class="clearfix"></div>
            </div>
        </div>
    </body>
</html>

CSS

#container{
    border:2px solid #F00;
    width: 95%;
    margin: 5px auto;
}
#left{
    width:48%;
    padding-right:2px;
    margin-left: 3px;
    float: left;
    display:inline;
    border:2px solid #CCC;
}
#right{
    width:48%;
    float: right;
    margin-right:3px;
    display:inline;
    border:2px solid #555;
}
#container ul{
    list-style-type: none;
}
#container li{
    margin:1px 1px;
    width: 86px;
    padding: 2px 2px;
    display: inline-block;
    background-color: #8BD400;
    border: 1px solid #486B02;
}
.extraTips{
    font-size:90%;
    color:#F00;
}
.clearfix{*zoom:1;}.clearfix:after{height:0;content:" ";clear:both;display:block;font-size:0;visibility:hidden;}

JavaScript

$(document).ready(function(){
        $("input[id^='ele_']").click(function(event){
            bindVsDelegate($(event.target).attr("id").substring(4));
        });
        
        //测试不同数量元素下，事件绑定和事件委托的耗时情况
        function bindVsDelegate(eleSize){
            //初始化。效果不明显，注释掉。
            //document.getElementById("leftCon").innerHTML = "";
            //document.getElementById("rightCon").innerHTML = "";
            //准备相应数量的元素
            var innerHtml = "<ul>";
            for(var i=0; i<eleSize; i++){
                innerHtml += "<li>第 "+i+" 个</li>";
            }
            innerHtml += "</ul>";
            document.getElementById("leftCon").innerHTML = innerHtml;
            document.getElementById("rightCon").innerHTML = innerHtml;
            
            //事件绑定测试
            var bindStart = new Date().getTime();
            $("#leftCon").find("li").click(function(){
                alert($(this).html());
            });
            var bindEnd = new Date().getTime();
            
            //事件委托测试
            var legateStart = new Date().getTime();    
            $('#rightCon').delegate('li', 'click', function() {
                alert($(this).html());
            });
            var legateEnd = new Date().getTime();    
            
            //显示测试结果
            alert(eleSize+" 个元素时，事件绑定耗时："+(bindEnd-bindStart)+"ms"+"； 事件委托耗时："+(legateEnd-legateStart)+"ms。");
        }
        
});