深入了解javascript事件 -自定义事件绑定
上一节分析了3种的事件绑定的优缺点，今天我们来写一个通用的能适合各种浏览器的事件绑定函数。
这里我们不重新写了，综合网上各种比较好的通用事件绑定函数，我这里采用大师 Dean Edwards事件绑定代码,请大家详细看下面的注释
function addEvent(element, type, handler) {
//给函数分配唯一的标志ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
//创建一个hash table来保存各种事件的处理函数
if (!element.events) element.events = {};
//创建一个hash table来保存某个事件处理函数
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//储存已经存在的事件处理函数
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// 保存时间处理函数到hash table中
handlers[handler.$$guid] = handler;
// 为事件提供一个统一全局的处理函数 这句是关键handleEvent函数属于element，也就是说函数的内部this是指向element
element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// 移除
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
//获取事件对象
event = event || window.event;
// 注意这里的this指向dom元素 因为addEvent中element["on" + type] = handleEvent
//获取已经缓存到dom元素的events属性的各个事件函数
var handlers = this.events[event.type];
//遍历各个函数
for (var i in handlers) {
// 注意这里的this指向dom元素 所有实际的处理函数变成element的一个内部处理函数
// 所以函数内部this指向dom元素
this.$$handleEvent = handlers[i];
//触发函数
this.$$handleEvent(event);
}
};
//给函数分配唯一的标志ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
//创建一个hash table来保存各种事件的处理函数
if (!element.events) element.events = {};
//创建一个hash table来保存某个事件处理函数
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//储存已经存在的事件处理函数
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// 保存时间处理函数到hash table中
handlers[handler.$$guid] = handler;
// 为事件提供一个统一全局的处理函数 这句是关键handleEvent函数属于element，也就是说函数的内部this是指向element
element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// 移除
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
//获取事件对象
event = event || window.event;
// 注意这里的this指向dom元素 因为addEvent中element["on" + type] = handleEvent
//获取已经缓存到dom元素的events属性的各个事件函数
var handlers = this.events[event.type];
//遍历各个函数
for (var i in handlers) {
// 注意这里的this指向dom元素 所有实际的处理函数变成element的一个内部处理函数
// 所以函数内部this指向dom元素
this.$$handleEvent = handlers[i];
//触发函数
this.$$handleEvent(event);
}
};
使用方法代码如下：
<script type="text/javascript">
window.onload = function () {
var tt = document.getElementById("sfs");
addEvent(tt, "click", t1);
addEvent(tt, "click", t2);
}
function t1() {
var i = this;
}
function t2() {
var i = this;
}
function addEvent(element, type, handler) {
//给函数分配唯一的标志ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
//创建一个hash table来保存各种事件的处理函数
if (!element.events) element.events = {};
//创建一个hash table来保存某个事件处理函数
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//储存已经存在的事件处理函数
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// 保存时间处理函数到hash table中
handlers[handler.$$guid] = handler;
// 为事件提供一个统一全局的处理函数 这句是关键handleEvent函数属于element，也就是说函数的内部this是指向element
element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// 移除
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
//获取事件对象
event = event || window.event;
// 注意这里的this指向dom元素 因为addEvent中element["on" + type] = handleEvent
//获取已经缓存到dom元素的events属性的各个事件函数
var handlers = this.events[event.type];
//遍历各个函数
for (var i in handlers) {
// 注意这里的this指向dom元素 所有实际的处理函数变成element的一个内部处理函数
// 所以函数内部this指向dom元素
this.$$handleEvent = handlers[i];
//触发函数
this.$$handleEvent(event);
}
};
</script>
</head>
<body>
<div style=" height:800px; width:800px; background:red; border:20px solid black; padding:50px;">
<div id="sfs" style="height:200px; width:200px; background:green; position:relative; ">safsasafss</div>
</div>
