该事件绑定函数具有如下特点:
1、在事件函数中,this指向的是当前元素
2、每个事件其实是一个有序列,按顺序执行这个序列。
3、正确的传递了event对象。对于event对象在w3c标准与ie中的不同之处可以做出修复,本例修复了事件冒泡与阻止默认行为。
4、本机测试通过ie、firefox、chrome、opera、safari(可以说通用主流浏览器)
5、支持删除事件绑定
// ---------- 事件绑定与删除绑定 ---------- //
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;
}
测试代码
<script type="text/网页特效" 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.111cn.net" 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>
上面代码测试可以通过现在主流的浏览器如有本机测试通过ie、firefox、chrome、opera、safari(可以说通用主流浏览器)