- //事件委托
- //这里我们创建bind函数,给了四个参数
- //obj,需要绑定事件的节点,
- //tar,在obj容器中的需要批量绑定事件的目标元素标签名
- //evName,需要绑定的事件名称
- //fn,需要为目标元素绑定的事件处理函数
- function bind(obj, tar, evName, fn, fnElse) {
- obj['on' + evName] = function(event) {
- var e = event || window.event,
- //首先对event做兼容,window.event主要用于兼容IE
- target = e.target || e.srcElement,
- //对target做兼容,e.srcElement主要用于兼容IE,这里获取的是触发事件的目标元素
- bool = true;
- //设置一个bool型变量,后面会用到
- if (target != obj) {
- //这一步比较重要,判断target是否和obj相等,目的在于区别触发事件的元素是否为绑定事件的元素本身,如果是,很明显不符合要求,因为我们要触发事件的对象应该是绑定元素内的某一些元素。
- (function() {
- //这里做了一个匿名函数,主要用于循环判断我们触发事件的元素(target)是否在我们的目标元素(tar)内
- if (target.tagName != tar.toUpperCase()) {
- //判断触发事件的元素标签名(tagName)是否和我们提供的目标元素的标签名(tar)相等,
- target = target.parentNode;
- //如果不是目标元素,则寻找触发事件元素的父元素,并修改target指向这个父元素
- if (target != obj) {
- //判断修改过后的target是否为我们绑定事件的元素
- arguments.callee();
- //如果不是我们绑定事件的元素,则重新运行这个匿名函数
- } else {
- bool = false;
- //如果是这个我们绑定事件的元素,则停止重新运行这个匿名函数,因为这代表我们的循环已经达到了绑定事件的元素,再往外查找已经没有必要了,这里将bool设置为false
- }
- }
- })();
- //这里的空括号用于执行匿名函数
- if (bool) {
- fn(target);
- } else {
- fnElse(target);
- }
- //判断是bool是否为true,如果为true,表示我们触发事件的元素在目标元素(tar)内,运行事件处理函数,并传入目标元素对象,如果为false,则相反。
- }
- }
- }
- //该片段来自于http://www.codesnippet.cn/detail/1208201513417.html
- //该片段来自于http://www.codesnippet.cn/detail/1208201513417.html
来源: http://www.codesnippet.cn/detail/1208201513417.html