为了优化在项目制作中会反复用到事件委托, 如给document上绑定click事件后, 再事件里判断最先触发的dom(e.target), 然后再执行不同的事件.. 但多个页面中要用的话得一直写, 很费劲. 索性写了个jQuery事件委托方法. 只是个人看法, 高手请指点.

为了优化在项目制作中会反复用到事件委托, 如给document上绑定click事件后, 再事件里判断最先触发的dom(e.target), 然后再执行不同的事件.. 但多个页面中要用的话得一直写, 很费劲. 索性写了个jQuery事件委托方法. 只是个人看法, 高手请指点.

你不防看看jQuery的delegate事件....

jQuery事件委托代码:

;(function ($) {
 var x = {};
 x._object = $(document);
 x.length = 0;
 x._cache = {};
 x.add = function (name) {//注册name事件
 if(!name||x.check(name)) {
 return x; 
 }
 x.length++;
 x._cache[name] = [];
 x[name] = function (ele,fn) {//扩展name事件方法
 if (!ele) {
 return x; 
 }
 if ("_object" === typeof(ele)) {
 for(var i in ele) {
 x._fn(i,ele[i],name);
 }
 return x;
 }
 x._fn(ele,fn,name);
 return x;
 };
 x[name].name = name;
 x._object.bind(name +".entrust",function (e) {
 var obj = $(e.target);
 $(x._cache[name]).each(function (i, n) {
 if(obj.is(n.ele)) {
 n.fn && n.fn.call(obj[0]);
 return false;
 }
 });
 });
 return x;
 }
 x._fn = function (ele,fn,name) {//内部使用
 var temp = {};
 temp.ele = ele;
 temp.fn = fn || false;
 x._cache[name].push(temp);
 return x;
 }
 x.check = function (name) {//检查是否有name事件
 return x._cache.hasOwnProperty(name)
 }
 x.remove = function (name) {//注销name事件
 return name? function () {
 if(x.check(name)) {
 x.length--;
 x[name] = function () {
 alert("该事件已被注销"); 
 }
 delete x._cache[name];
 x._object.unbind(name +".entrust");
 } 
 return x;
 }(): x
 }
 x.size = function (name) {//返回name事件下的方法数量
 return name? function () {
 if(x.check(name)) {
 return x._cache[name].length;
 } 
 return 0;
 }() : 0;
 }
 $.extend({
 entrust:x
 });
})(jQuery);

jQuery事件委托用法:

注册事件, 多次注册无效;
$.entrust.add("事件名称");
在已注册事件添加方法, 注销这个事件后这些方法则无效;
自动阻止冒泡,只会找到当前发生触发的dom;
方法内this指向的当前触发的选择器的dom;
支持click({ele1: fn1, ele2: fn2 });
$.entrust.click(ele, function () {});
移除事件
$.entrust.remove("事件名称");
检查是否被注册
$.entrust.check("事件名称");
已注册事件数量
$.entrust.length;
已注册事件里方法数量
$.entrust.size("click");
例子:
var a = $.entrust.add("click");//注册事件并赋值给a,下面可以使用a或者$.entrust;
a.click("li.first", function () {//在已注册点击事件里添加委托, click(ele,fn); ele为jQuery选择器, fn为该执行该事件;
 alert("我是第一个");
 alert("我的HTML为"+$(this).html());
});
a.click("li", function () {
 alert("我是全部li"); 
});
a.add("mouseover");
a.mouseover({
 "li":function () {alert(1);}
});
alert("是否被注册过click事件:"+ a.check("click"));// true
alert("注册click的多少:"+ a.size("click")); // 2
alert("一共注册个几个事件:"+ a.length); // 2
a.click("li.on", function () {//再添加个
 alert("我是高亮的");
});
a.remove("click");//移除事件
alert("是否被注册过click事件:"+ a.check("click"));// false
alert("注册click的多少:"+ a.size("click")); // 0

仅是个人看法. 袁方, 你怎么看?

发表于 2013年08月09日 16:18:32 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 16:18:32