上篇分享提出的这个事件委托，今天让我来详细说明下把。
先看一段例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <div class="tab" > <ul class="wrapper" > <li class="detail">1</li> <li class="detail">2</li> <li class="detail">3</li> <li class="detail">4</li> <li class="detail">5</li> <li class="detail">6</li> <li class="detail">7</li> <li class="detail">8</li> <li class="detail">9</li> <li class="detail">10</li> </ul> </div> <script type="text/javascript"> $("document").ready(function(){ /**事件委托**/ $(".wrapper").on("click",function(e){ console.log(e.target); console.log(e.target.nodeName); if(e.target.nodeName=="LI"){ alert("ok") } }) /**普通监听**/ $(".detail").on("click",function(e){ console.log(e); }) })
</script> </body> </html>
这里我给出了一个无序列表，我们想在点击li后输出一个内容。
对于我们大部分新手来说可能就直接在li上做事件注册。但是假如这个li有成千上万个的话，那个效率可想而知。
那么解决办法就是利用上篇说的事件冒泡。在li最外层的ul上增加事件监听。因为点击内部li后就会事件会冒泡到最外层。
而我们要做的就是判断下这个事件的目标对象是哪个。
我这里采用了判断节点的方法，当然同学们也可以定义好类名，用jq的hasClass();方法判断目标对象。这样一来我们的事件效率就会很高了。