前面我写过一个
不过,此函数只实现了事件的绑定,并保证按顺序执行这些绑定的函数。但是,不能实现元素的某个事件上删除一个函数。比如:element元素的click事件上有三个函数分别是a,b,c。现在要删除c这个函数的绑定,就无法实现了。所以特重新编写了两个函数:
bindEvent(element, eventName, func) —— 绑定func到element的eventName事件上(不重复绑定)
unBindEvent(element, eventName, func) —— 删除element上的eventName事件上的func函数。
下面是这两个函数的源码:
// ---------- 事件绑定与删除绑定 ---------- // function bindEvent(element, eventName, func) { var events = element[ ' the ' + eventName]; // 用于保存某个事件序列 if ( ! events) { // 如果不存在一个序列,则创建它,并加入HTML标记当中的onEvent = function(){}形式的绑定 events = element[ ' the ' + eventName] = []; if (element[ ' on ' + eventName]) { events.push(element[ ' on ' + eventName]); } } // 检测是否为重复绑定 for ( var i = 0 ; i < events.length; i ++ ) { if (events[i] === func) { flag = true ; break ; } } // 非重复绑定,则加入该函数事件 if (i >= events.length) { events.push(func); } // 重新定义这个事件的执行方式 element[ ' on ' + eventName] = function (event) { event = event || ( function () { // 修复IE的事件对象 var e = window.event; e.preventDefault = function () { e.returnValue = false ; } e.stopPropagation = function () { e.cancelBubble = true ; } // 根据需要继续修复 return e; })(); // 顺序执行这些函数 for ( var i = 0 ; i < events.length; i ++ ) { events[i].call(element, event); } }} // 删除事件绑定 function unBindEvent(element, eventName, func) { var events = this [ ' the ' + eventName]; // 如果不存在一个事件序列 if ( ! events) { return false ; } // 检测该函数是否存在该事件序列当中 for ( var i = 0 ; i < events.length; i ++ ) { if (func === events[i]) { [].splice.call(events, i, 1 ); return true ; } } // 函数不存在该事件序列当中 return false ;} 该事件绑定函数具有如下特点:
1、在事件函数中,this指向的是当前元素
2、每个事件其实是一个有序列,按顺序执行这个序列。
3、正确的传递了event对象。对于event对象在W3C标准与IE中的不同之处可以做出修复,本例修复了事件冒泡与阻止默认行为。
4、本机测试通过IE、Firefox、Chrome、Opera、Safari(可以说通用主流浏览器)
5、支持删除事件绑定
当然,还得拿来做一个测试,下面是测试的代码:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > 无标题文档 </ title > < style type ="text/css" > #test { background-color : #f00 ; } </ style > < script type ="text/javascript" src ="event.js" ></ script > < script type ="text/javascript" > bindEvent(window, ' load ' , function () { var ul = document.getElementById( " test " ); var a = document.getElementById( " baidu " ); bindEvent(ul, ' click ' , function (e){ alert( " 我是 " + this + " 元素, 你点击了我! " ); }); bindEvent(a, ' click ' , function (e) { alert( " 我是 " + this + " ,你点击了我! " ); });}); </ script > </ head > < body > < ul id ="test" > < p class ="t" > Hello,world! </ p > < p > Hello, < a href ="http://www.baidu.com" id ="baidu" > 百度 </ a > ! </ p > < li id ="haha" class ="t" > afasdfsa </ li > < li > sfk </ li > < li class ="t" > sdklfajsfjk </ li > < li > end </ li > < li class ="te" > of </ li > </ ul > < ol id ="test2" > < li class ="t" > 附加的第一项 </ li > < li class ="t" > 附加的第二项 </ li > < li class ="t" > 附加的第三项 </ li > </ ol > </ body > </ html > 首先,点击红色的UL试试看 —— 将预期弹出:你好,我是HTMLUListElement元素,你点击了我!
好的,再点一下其中的百度链接 ——
预期弹出:你好,我是http://www.baidu.com/,你点击了我!
非预期弹出:你好,我是HTMLULlistElement元素,你点击了我?
为什么非预期弹出?——对,这就是事件的冒泡,当我们点击百度的链接后,该事件将产生冒泡,过程如:<a> -- <li> -- <ul> -- <body> -- document。而ul我们绑定了一个单击事件,所以这时将触发其click事件,而出了非预期弹出。
那么如何阻止?在绑定百度链接的函数体后追加一行:e.stopPropagation(),再次测试:非预期弹出已经没有了。
如果我只想在点击百度链接时,弹出对话框,而不跳转到百度去呢?在绑定百度链接的函数体再次追加一行:e.preventDefault();
测试完毕!具有怀疑精神的朋友可以Copy之后,另做其它测试!!!!
转载请注明:转载自