JS自定义事件原生
时间:2022-06-11
本文章向大家介绍JS自定义事件原生,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
说在开始,Javascript自定义事件类似设计的观察者模式,通过状态的变更来监听行为,主要功能解耦,易于扩展。多用于组件、模块间的交互。
原型模式下的js自定义事件
var EventTarget = function() {
this._listener = {};
};
EventTarget.prototype = {
constructor: this,
addEvent: function(type, fn) {
if (typeof type === "string" && typeof fn === "function") {
if (typeof this._listener[type] === "undefined") {
this._listener[type] = [fn];
} else {
this._listener[type].push(fn);
}
}
return this;
},
addEvents: function(obj) {
obj = typeof obj === "object"? obj : {};
var type;
for (type in obj) {
if ( type && typeof obj[type] === "function") {
this.addEvent(type, obj[type]);
}
}
return this;
},
fireEvent: function(type) {
if (type && this._listener[type]) {
//event参数设置
var events = {
type: type,
target: this
};
for (var length = this._listener[type].length, start=0; start<length; start+=1) {
//改变this指向
this._listener[type][start].call(this, events);
}
}
return this;
},
fireEvents: function(array) {
if (array instanceof Array) {
for (var i=0, length = array.length; i<length; i+=1) {
this.fireEvent(array[i]);
}
}
return this;
},
removeEvent: function(type, key) {
var listeners = this._listener[type];
if (listeners instanceof Array) {
if (typeof key === "function") {
for (var i=0, length=listeners.length; i<length; i+=1){
if (listeners[i] === key){
listeners.splice(i, 1);
break;
}
}
} else if (key instanceof Array) {
for (var lis=0, lenkey = key.length; lis<lenkey; lis+=1) {
this.removeEvent(type, key[lenkey]);
}
} else {
delete this._listener[type];
}
}
return this;
},
removeEvents: function(params) {
if (params instanceof Array) {
for (var i=0, length = params.length; i<length; i+=1) {
this.removeEvent(params[i]);
}
} else if (typeof params === "object") {
for (var type in params) {
this.removeEvent(type, params[type]);
}
}
return this;
}
};
测试demo
var myEvents = new EventTarget();
myEvents.addEvents({
"once": function() {
alert("该弹框只会出现一次!");
this.removeEvent("once");
},
"infinity": function() {
alert("每次点击页面,该弹框都会出现!");
}
});
document.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (!target || !/input|pre/i.test(target.tagName)) {
myEvents.fireEvents(["once", "infinity"]);
}
};
实现类似jquery$符号
用doucment.createEvent创建事件,initEvent初始化,dispatchEvent发射事件
var $ = function(el) {
return new $.init(el);
};
$.init = function (el) {
this.el = (el && el.nodeType == 1)? el: document;
};
$.init.prototype = {
constructor: this,
addEvent: function(type, fn, capture) {
var el = this.el;
if (window.addEventListener) {
el.addEventListener(type, fn, capture);
var ev = document.createEvent("HTMLEvents");
ev.initEvent(type, capture || false, false);
if (!el["ev" + type]) {
el["ev" + type] = ev;
}
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
if (isNaN(el["cu" + type])) {
// 自定义属性
el["cu" + type] = 0;
}
var fnEv = function(event) {
if (event.propertyName == "cu" + type) { fn.call(el); }
};
el.attachEvent("onpropertychange", fnEv);
if (!el["ev" + type]) {
el["ev" + type] = [fnEv];
} else {
el["ev" + type].push(fnEv);
}
}
return this;
},
fireEvent: function(type) {
var el = this.el;
if (typeof type === "string") {
if (document.dispatchEvent) {
if (el["ev" + type]) {
el.dispatchEvent(el["ev" + type]);
}
} else if (document.attachEvent) {
el["cu" + type]++;
}
}
return this;
},
removeEvent: function(type, fn, capture) {
var el = this.el;
if (window.removeEventListener) {
el.removeEventListener(type, fn, capture || false);
} else if (document.attachEvent) {
el.detachEvent("on" + type, fn);
var arrEv = el["ev" + type];
if (arrEv instanceof Array) {
for (var i=0; i<arrEv.length; i+=1) {
el.detachEvent("onpropertychange", arrEv[i]);
}
}
}
return this;
}
};
测试demo
var fnClick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeType === 1) {
alert("点击类型:" + e.type);
$(target).fireEvent("alert");
}
}, funAlert1 = function() {
alert("自定义alert事件弹出!");
}, funAlert2 = function() {
alert("自定义alert事件再次弹出!");
};
// 测试用的张小姐图片
var elImage = document.getElementById("image");
$(elImage)
.addEvent("click", fnClick)
.addEvent("alert", funAlert1)
.addEvent("alert", funAlert2);
// 删除自定义事件按钮
var elButton = document.getElementById("button");
$(elButton).addEvent("click", function() {
$(elImage)
.removeEvent("alert", funAlert1)
.removeEvent("alert", funAlert2);
alert("清除成功!");
});
参数 |
事件 |
初始化方法 |
---|---|---|
HTMLElements |
HTMLEvent |
initEvent() |
MouseEvents |
MouseEvent |
initMouseEvent() |
UIEvents |
UIEvent |
initUIEvent() |
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 方便快捷的调试 Node.js 程序
- LeetCode 06Z字形变换&07整数反转
- 对搜索表单提交是否为空进行弹出提示
- PWN入门(Fastbin Attack)
- Qt项目网络聊天室设计
- nginx 端口转发
- linux通用链表
- 什么情况用ArrayList or LinkedList呢?
- Dubbo系列-扬帆起航
- 使用 Horoscope 测试 TiDB 优化器
- 聊聊claudb的importRDB
- 【17期】什么情况用ArrayList or LinkedList呢?
- YOLO V3网络结构解析
- 文献笔记二十一:PhenoGram可视化染色体上的信息
- 【动手学深度学习笔记】之对模型参数的访问、初始化和共享