自定义事件类型
来源:互联网 发布:python加减乘除函数 编辑:程序博客网 时间:2024/06/05 03:32
我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件,
那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序
1.js所支持的浏览器默认事件
浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件。
js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如:
//DOM0级事件处理程序
var
oDiv = document.getElementById(
'oDiv'
);
oDiv.onclick =
function
(){
alert(
"你点击了我"
);
}
又或者
//DOM2级事件处理程序
var
oDiv = document.getElementById(
'oDiv'
);
//非ie
oDiv.addEventListener(
"click"
,
function
(){
alert(
"你点击了我"
);
},
false
);
//ie
oDiv.attachEvent(
"onclick"
,
function
(){
alert(
"你点击了我"
);
});
所有我就不做过多的研究,毕竟我们来讨论js自定义事件,这里给出一个我之前封装过的处理js默认事件的代码:
//跨浏览器的事件处理程序
//调用时候直接用domEvent.addEvent( , , );直接调用
//使用时候,先用addEvent添加事件,然后在handleFun里面直接写其他函数方法,如getEvent;
//addEventListener和attachEvent---都是dom2级事件处理程序
var
domEvent = {
//element:dom对象,event:待处理的事件,handleFun:处理函数
//事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等
addEvent:
function
(element,event,handleFun){
//addEventListener----应用于mozilla
if
(element.addEventListener){
element.addEventListener(event,handleFun,
false
);
}
//attachEvent----应用于IE
else
if
(element.attachEvent){
element.attachEvent(
"on"
+event,handleFun);
}
//其他的选择dom0级事件处理程序
else
{
//element.onclick===element["on"+event];
element[
"on"
+event] = handleFun;
}
},
//事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等
removeEvent:
function
(element,event,handleFun){
//removeEventListener----应用于mozilla
if
(element.removeEventListener) {
element.removeEventListener(event,handleFun,
false
);
}
//detachEvent----应用于IE
else
if
(element.detachEvent) {
element.detachEvent(
"on"
+event,handleFun);
}
//其他的选择dom0级事件处理程序
else
{
element[
"on"
+event] =
null
;
}
},
//阻止事件冒泡
stopPropagation:
function
(event){
if
(event.stopPropagation){
event.stopPropagation();
}
else
{
event.cancelBubble =
true
;
//IE阻止事件冒泡,true代表阻止
}
},
//阻止事件默认行为
preventDefault:
function
(event){
if
(event.preventDefault){
event.preventDefault();
}
else
{
event.returnValue =
false
;
//IE阻止事件冒泡,false代表阻止
}
},
//获得事件元素
//event.target--非IE
//event.srcElement--IE
getElement:
function
(event){
return
event.target || event.srcElement;
},
//获得事件
getEvent:
function
(event){
return
event? event : window.event;
},
//获得事件类型
getType:
function
(event){
return
event.type;
}
};
接下类我们不如正题,js自定义事件
2.对象直接量封装js自定义事件
根据上面的封装,我们可以这样构思
var
eventTarget = {
addEvent:
function
(){
//添加事件
},
fireEvent:
function
(){
//触发事件
},
removeEvent:
function
(){
//移除事件
}
};
相信这样大家还是比较好理解的,然后又有一个问题大家可以想到,那就是,js默认事件,js可以一一对应,知道那个是那个,那么我们的自定义事件呢,这个一一对应的映射表只能我们自己去建立,然后我这样
var
eventTarget = {
//保存映射
handlers:{},
addEvent:
function
(){
//处理代码
},
fireEvent:
function
(){
//触发代码
},
removeEvent:
function
(){
//移出代码
}
};
我是这样构建这个映射关系的
handlers = {
"type1"
:[
"fun1"
,
"fun2"
,
// "..."
],
"type2"
:[
"fun1"
,
"fun2"
// "..."
]
//"..."
}
这样每一个类型可以有多个处理函数,以便于我们以后扩充
接下来就是代码方面的实战的,编写具体的处理代码了…
相信大家对于这个思路已经很清楚了,我直接附上代码
//直接量处理js自定义事件
var
eventTarget = {
//保存事件类型,处理函数数组映射
handlers:{},
//注册给定类型的事件处理程序,
//type -> 自定义事件类型, handler -> 自定义事件回调函数
addEvent:
function
(type, handler){
//判断事件处理数组是否有该类型事件
if
(eventTarget.handlers[type] == undefined){
eventTarget.handlers[type] = [];
}
//将处理事件push到事件处理数组里面
eventTarget.handlers[type].push(handler);
},
//触发一个事件
//event -> 为一个js对象,属性中至少包含type属性,
//因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
fireEvent:
function
(event){
//判断是否存在该事件类型
if
(eventTarget.handlers[event.type]
instanceof
Array){
var
_handler = eventTarget.handlers[event.type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for
(
var
i = 0; i < _handler.length; i++){
//执行触发
_handler[i](event);
}
}
},
//注销事件
//type -> 自定义事件类型, handler -> 自定义事件回调函数
removeEvent:
function
(type, handler){
if
(eventTarget.handlers[type]
instanceof
Array){
var
_handler = eventTarget.handlers[type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for
(
var
i = 0; i < _handler.length; i++){
//找出本次需要处理的事件下标
if
(_handler[i] == handler){
break
;
}
}
//删除处理事件
_handler.splice(i, 1);
}
}
};
这是一种调用运行的方法
eventTarget.addEvent(
"eat"
,
function
(){
console.log(123);
//123
});
eventTarget.fireEvent({type:
"eat"
});
这种方法有一个缺点,不能删除该处理事件,因为我们是用映射表做的,而且也不提倡,直接给映射表里面存这么多数据,有点多。
另一种方法,将处理事件提取出来(推荐)
function
b(){
console.log(123);
}
eventTarget.addEvent(
"eat"
,b);
eventTarget.fireEvent({
type:
"eat"
});
//123
eventTarget.removeEvent(
"eat"
,b);
eventTarget.fireEvent({type:
"eat"
});
//空
也可以这样,传递更多的参数
eventTarget.fireEvent({
type:
"eat"
,
food:
"banana"
});
function
b(data){
console.log(data.food);
//banana
}
总结:字面量这种方法,有点儿缺点,就是万一一不小心,把某个属性在handler函数里面,赋值null,这样会造成我们的的eventTarget 方法崩盘。看来原型应该是个好方法,更安全一点。
3.对象原型封装js自定义事件
由于前面思路基本都讲清楚了,这里我直接附上代码,大家可以研究下其中的利弊,或许你可以找到更好的方法解决Ta…
//自定义事件构造函数
function
EventTarget(){
//事件处理程序数组集合
this
.handlers = {};
}
//自定义事件的原型对象
EventTarget.prototype = {
//设置原型构造函数链
constructor: EventTarget,
//注册给定类型的事件处理程序,
//type -> 自定义事件类型, handler -> 自定义事件回调函数
addEvent:
function
(type, handler){
//判断事件处理数组是否有该类型事件
if
(
typeof
this
.handlers[type] ==
'undefined'
){
this
.handlers[type] = [];
}
//将处理事件push到事件处理数组里面
this
.handlers[type].push(handler);
},
//触发一个事件
//event -> 为一个js对象,属性中至少包含type属性,
//因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
fireEvent:
function
(event){
//模拟真实事件的event
if
(!event.target){
event.target =
this
;
}
//判断是否存在该事件类型
if
(
this
.handlers[event.type]
instanceof
Array){
var
handlers =
this
.handlers[event.type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for
(
var
i = 0; i < handlers.length; i++){
//执行触发
handlers[i](event);
}
}
},
//注销事件
//type -> 自定义事件类型, handler -> 自定义事件回调函数
removeEvent:
function
(type, handler){
//判断是否存在该事件类型
if
(
this
.handlers[type]
instanceof
Array){
var
handlers =
this
.handlers[type];
//在同一个事件类型下的可能存在多种处理事件
for
(
var
i = 0; i < handlers.length; i++){
//找出本次需要处理的事件下标
if
(handlers[i] == handler){
break
;
}
}
//从事件处理数组里面删除
handlers.splice(i, 1);
}
}
};
调用方法
function
b(){
console.log(123);
}
var
target =
new
EventTarget();
target.addEvent(
"eat"
, b);
target.fireEvent({
type:
"eat"
});
//123
原型这种方法,与直接量方法功能是一样的…
- 自定义事件类型
- 使用delegate类型设计自定义事件
- wxwidgets自定义事件类型的问题
- Flex自定义事件类型,自定义事件,分发事件,以LoginEvent为例
- .NET中使用Delegate类型设计自定义事件
- Flex4自定义事件类型Event的相关应用
- 一个支持事件event的自定义EventTarget类型
- 事件类型
- 事件类型
- 事件类型
- 事件类型
- 事件类型
- 事件类型--UI事件
- 事件类型--焦点事件
- 事件---事件类型
- 自定义事件
- 自定义事件
- 自定义事件
- 剑指offer:斐波那契数列(java)
- 【hadoop】hadoop学习笔记-shell命令
- iOS开发之自定义视图上下无限循环滚动实现
- mvc入口文件和路由
- 机器学习(六) - - 模型评估和选择①经验误差与过拟合
- 自定义事件类型
- 第五周-raptor 输出斐波那契数列的前n个数
- mvc简单制作入口文件
- test
- 二元多项式
- 面试中的排序算法总结
- 超好用的滑动tab控件
- LIUNX 基础命令 (目录处理命令)
- javascript 中基本包装类型