为什么我推荐事件委托而不是批量绑定
2012-05-20 22:55
399 查看
太长时间没写blog了，最近迷迷糊糊，又到一个周末，为了给自己一个交代，还是尽力记录点东西吧。免得哪天失忆想回去找资料都没地方找了。
今天要记录的东西很简单，就是事件委托。我相信但凡一个做前端方向的，甚至不是前端方向的编码者，对于dom元素的事件委托应该都了解了。所以今天不是说“事件委托”是什么？而是说为什么需要它。
【基于前端模版的开发】
我们先说这个，为什么要先说这个呢，因为事件委托在这种模式下显得比较有价值。
前端模版-相信大家也都耳熟能详，玩的很溜了。web的越来越多的工作开始移交到前端来做。其中就包含这一个东西。当然，我们今天也不讨论前端模版的优势。而是要看接下来使用过程中可能遇到的一些问题。
比如简单的，如下：
可能大家看这个：
看里面这个onclick总会觉得别扭。但是我们还得绑事件呀，直接用addEventListener或者attachEvent，一旦换模版重置innerHTML， 那之前的addEventListener不就没用了么....
总不能每次都重绑一次吧？？ 而且通常也容易带出内存泄漏等等乱七八糟的东西。
所以，这时候，事件委托就有用了。
【利用委托进行事件派发】
一个简单的委托例子可能像下面的代码：
可能注意到里面有个过滤指定dom的代码
当元素简单时，当然还好，当dom层级复杂时。我们就需要做一点小手脚。
给我们需要绑事件的元素，加个标志位，然后利用事件冒泡即可。
简单的，比如下面的代码：
原理就是加一个指定标志位，冒泡到有指定属性的，就停下来，为他响应对应的事件。当然前提是有约定（这个约定属性不能乱用 ^.^）
于是我们就可以这样用：
于是这样，几乎所有的 click 事件全部放到body上来处理了。
不用担心 templete 模板化，会把之前的事件弄没了。
同时，也可以大大减少对于内存泄漏的一些担心。
【后记】
当然，这只是一个很小很简单的技巧和经验，同时也不适用于所有情况，比如 resize， mousemove 之类的场景，基本不适用。 但是对于常用的类似click，mousedown，mouseup之类。大部分情况还是可以考虑一下的。
说不定可以解决一些意想不到的问题。(^^)
简单的东西不用多说，一个小技巧，仅供参考而已，估计已经有很多同学早就开始这样做了。
今天要记录的东西很简单，就是事件委托。我相信但凡一个做前端方向的，甚至不是前端方向的编码者，对于dom元素的事件委托应该都了解了。所以今天不是说“事件委托”是什么？而是说为什么需要它。
【基于前端模版的开发】
我们先说这个，为什么要先说这个呢，因为事件委托在这种模式下显得比较有价值。
前端模版-相信大家也都耳熟能详，玩的很溜了。web的越来越多的工作开始移交到前端来做。其中就包含这一个东西。当然，我们今天也不讨论前端模版的优势。而是要看接下来使用过程中可能遇到的一些问题。
比如简单的，如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script>
var $T = new function () {
var $ = this;
// escape
this.escape = function(string) {
return (''+string).replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\//g,'/');
};
// template
this.templateSettings = {
evaluate : /{{([\s\S]+?)}}/g,
interpolate : /{{=([\s\S]+?)}}/g,
escape : /{{-([\s\S]+?)}}/g
};
var noMatch = /.^/;
var unescape = function(code) {
return code.replace(/\\\\/g, '\\').replace(/\\'/g, "'");
};
this.template = function (str, data) {
var c = $.templateSettings;
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
str.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'")
.replace(c.escape || noMatch, function(match, code) {
return "',$.escape(" + unescape(code) + "),'";
})
.replace(c.interpolate || noMatch, function(match, code) {
return "'," + unescape(code) + ",'";
})
.replace(c.evaluate || noMatch, function(match, code) {
return "');" + unescape(code).replace(/[\r\n\t]/g, ' ') + ";__p.push('";
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')
+ "');}return __p.join('');";
var func = new Function('obj', '$', tmpl);
if (data) return func(data, $);
return function (data) {
return func.call(this, data, $);
};
}
}
var tpl1 = '<div>我由第一个模版生成 {{= name }} <button onclick="say.call(this)">one</button></div>',
tpl2 = '<div>我由第二个模版生成 {{= name }} <button onclick="say.call(this)">two</button></div>';
function say () {
alert(this.value || this.innerHTML)
}
document.body.innerHTML = $T.template(tpl1, {name: 'Horizon'})
</script>
</body>可能大家看这个：
var tpl1 = '<div>我由第一个模版生成 {{= name }} <button onclick="say.call(this)">one</button></div>',
tpl2 = '<div>我由第二个模版生成 {{= name }} <button onclick="say.call(this)">two</button></div>';看里面这个onclick总会觉得别扭。但是我们还得绑事件呀，直接用addEventListener或者attachEvent，一旦换模版重置innerHTML， 那之前的addEventListener不就没用了么....
总不能每次都重绑一次吧？？ 而且通常也容易带出内存泄漏等等乱七八糟的东西。
所以，这时候，事件委托就有用了。
【利用委托进行事件派发】
一个简单的委托例子可能像下面的代码：
<ul id="dele-ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var $E = {};
$E.on = function (o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function () { f.call(o) });
};
$E.on(document.getElementById('dele-ul'), 'click', function (e) {
var tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
alert(tar.innerHTML);
}
})
</script>可能注意到里面有个过滤指定dom的代码
if (tar.nodeName.toLowerCase() == 'li') { ... }当元素简单时，当然还好，当dom层级复杂时。我们就需要做一点小手脚。
给我们需要绑事件的元素，加个标志位，然后利用事件冒泡即可。
简单的，比如下面的代码：
$E = new function () {
function on (o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function () { f.call(o) });
};
function bubbleTo (el, endEl, key) {
if (!el || (el && el == document)) {
return null;
} else if (el == endEl || (el.getAttribute && el.getAttribute(key))) {
return el;
} else if (el.parentNode) {
return bubbleTo(el.parentNode, endEl, key);
} else {
return null;
}
}
function dispatch (el, type, key, distributor) {
if (typeof key == 'object') {
distributor = key;
key = 'data-cmd';
}
$E.on(el, type, function (e) {
var tar = bubbleTo(e.target, el, key);
if (tar) {
var cmd = tar.getAttribute(key);
distributor[cmd] && distributor[cmd].call && distributor[cmd].call(tar, e, tar);
}
});
}
this.on = on;
this.bubbleTo = bubbleTo;
this.dispatch = dispatch;
}原理就是加一个指定标志位，冒泡到有指定属性的，就停下来，为他响应对应的事件。当然前提是有约定（这个约定属性不能乱用 ^.^）
于是我们就可以这样用：
<body>
<section>
...
<button data-custom-cmd="sayHi"><button>
<div id="tpl-con">
...
</div>
...
</section>
<script>
var tpl1 = '<a data-custom-cmd="walk"><span>{{= name }}</span></a>';
// use tpl
...
// dispatch Event
$E.dispatch(document.body, 'click', 'data-custom-cmd', {
'sayHi': function (e, tar) {
// todo
},
'walk': function (e, tar) {
// todo
}
...
});
</script>
</body>于是这样，几乎所有的 click 事件全部放到body上来处理了。
不用担心 templete 模板化，会把之前的事件弄没了。
同时，也可以大大减少对于内存泄漏的一些担心。
【后记】
当然，这只是一个很小很简单的技巧和经验，同时也不适用于所有情况，比如 resize， mousemove 之类的场景，基本不适用。 但是对于常用的类似click，mousedown，mouseup之类。大部分情况还是可以考虑一下的。
说不定可以解决一些意想不到的问题。(^^)
简单的东西不用多说，一个小技巧，仅供参考而已，估计已经有很多同学早就开始这样做了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js事件批量绑定-事件委托
- 为什么tap事件绑定在document上，而不是对象本身上
- 为什么要使用事件而不是委托变量？
- addEventListener（type, fn , true/false）绑定事件第三个参数作用以及利用事件的冒泡，实现事件委托
- jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
- 利用委托绑定事件
- 你不是菜鸟:他为什么没过试用期 推荐
- JS 事件绑定、事件监听、事件委托详细介绍
- 关于事件委托与DHTML的事件绑定的相似之处
- jQuery的事件绑定与事件委托
- 转载： jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
- jquery开发：事件冒泡机制与委托机制，jQuery动态绑定
- 在ASP.NET页面中推荐使用覆写（Override）而不是事件处理（Event Handler）［转帖］
- 为什么在Python里推荐使用多进程而不是多线程？
- 为什么在Python里推荐使用多进程而不是多线程？
- c#事件,委托机制 这个例子非常好哦.提供源码,.一下子就了解了,还推荐去看 皮特的故事 要学委托 事件的话,
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
- 为什么在Python里推荐使用多进程而不是多线程？
- JS事件机制：事件绑定、事件监听、事件委托(事件代理)
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE