diff --git a/examples/util.html b/examples/util.html index 739369bc..09ef0182 100644 --- a/examples/util.html +++ b/examples/util.html @@ -13,18 +13,32 @@ body{padding: 50px;} - - - - - +
+ 默认 body 委托元素 +
+ + + + + + +
+


-
- - -
+
+ 自定义委托元素 +
+
+ + + + +
+
+
+
@@ -105,7 +119,11 @@ layui.use(['lay', 'util', 'layer'], function(){ alert(othis.html()) }, e2: function(othis){ - alert(othis.html()) + alert('body:'+ othis.html()) + }, + getBodyEvents: function(othis, e) { + var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA'); + console.log(dataCache.events); } }); @@ -120,20 +138,20 @@ layui.use(['lay', 'util', 'layer'], function(){ }); // 自定义触发事件的元素属性名、自定义触发事件的方式 - util.on('lay-active', { - e4: layui.throttle(function(othis) { + util.on('lay-bind', { + e1: layui.throttle(function(othis) { layer.tips(othis.html(), this, { tips: 3 }); }, 3000), // 3s 内不重复执行 - e5: function() { + e2: function() { console.log(111); } }, { trigger: 'mouseenter' }); // Test: 不同属性、相同值 - util.on('lay-active1', { - e4: function(othis) { - this.innerHTML = 'hover: '+ (Math.random()*100000 | 0); + util.on('lay-active', { + e1: function(othis) { + this.innerHTML = 'hover: lay-active - 事件 e1 - '+ (Math.random()*100000 | 0); } }, { trigger: 'mouseenter' @@ -146,13 +164,27 @@ layui.use(['lay', 'util', 'layer'], function(){ this.innerHTML = 'click: '+ (Math.random()*100000 | 0); layui.stope(e); // 阻止事件冒泡 }, - e5: function(othis) { + e5: function(othis, e) { this.innerHTML = 'click: '+ (Math.random()*100000 | 0); + }, + getElemEvents: function(othis, e) { + var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA'); + console.log(dataCache.events); } }, { elem: '#ID-util-on-test' }); + // 自定义触发事件的委托元素 + 自定义触发事件 + util.on({ + e6: function(othis, e) { + this.innerHTML = 'hover: 事件 e6 - '+ (Math.random()*100000 | 0); + } + }, { + elem: '#ID-util-on-test', + trigger: 'mouseenter' + }); + // 倒计时 var countdown = util.countdown({ diff --git a/src/modules/util.js b/src/modules/util.js index cc628ee2..7fb37649 100644 --- a/src/modules/util.js +++ b/src/modules/util.js @@ -417,31 +417,30 @@ layui.define('jquery', function(exports){ // 初始化 data 默认值，以委托元素为存储单元 if (!elem.data(DATANAME)) { elem.data(DATANAME, { - events: {}, - callbacks: {} + events: {} }); } // 读取 data 缓存 var dataCache = elem.data(DATANAME); - var callbacks = dataCache.callbacks; - // 根据 attr 记录事件集合 - events = dataCache.events[attr] = $.extend(true, dataCache.events[attr], events); + // 根据 attr 和 trigger 的组合作为 key + var key = attr + '_' + options.trigger; + + // 根据 key 记录事件集合 + events = dataCache.events[key] = $.extend(true, dataCache.events[key], events); + // 清除事件委托，避免重复绑定 - elem.off(options.trigger, attrSelector, callbacks[attr]); + var trigger = options.trigger + '.lay_util_on'; + elem.off(trigger, attrSelector); // 绑定事件委托 - elem.on( - options.trigger, - attrSelector, - callbacks[attr] = function(e) { - var othis = $(this); - var key = othis.attr(attr); - typeof events[key] === 'function' && events[key].call(this, othis, e); - } - ); + elem.on(trigger, attrSelector, function(e) { + var othis = $(this); + var attrValue = othis.attr(attr); + typeof events[attrValue] === 'function' && events[attrValue].call(this, othis, e); + }); return events; }