一个事件代理分类处理事件类型的例子

有如下需求，页面中包含数个标签，每个标签数个监听事件，并随事件类型的不同，进行不同的处理操作。

 html中部分代码如下：

<ul class="main">
   <li class="one"></li>
   <li class="two"></li>
   <li class="three"></li>
</ul>

 

js实现事件代理：

function selectHandle(action){
   $(".main").on(action,function({
       var target = event.target;
       swicth(target.className){
           case 'one': 
                swicth(action){//处理操作};
           case 'two':
                swicth(action){//处理操作};
           case 'three':
                swicth(action){//处理操作};
       }
   }));
}

 

所以如果要在这些子元素上对监听到的不同事件类型实现不同的操作，只需进行如下调用：

selectHandle('mouseover');
selectHandle('mouseout');