JavaScript使用自定义事件实现简单的模...

 WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有：

UI事件；
焦点事件；
鼠标事件；
滚轮事件；
文本事件；
键盘事件；
变动事件；

现在网页上有一个输入框， 如果我们要对用户输入的字符串进行过滤， 或者是截获用户的输入进行处理的话, 我们要肿么办

同学们纷纷举手说：“老师，我知道，是使用添加事件“，

老师也很欣慰地点了点头， 这群家伙真的是越来越聪明了,

老师又问了”如果要取消用户的输入怎么办了“，

坐在最前排眼睛最小的同学急忙说”ev.preventDefault(),ev.returnValue = false;"

老师又说“不错啊，都学会抢答了啊， 我裤子都脱了， 你就答这个2？”

过了一秒钟, 又一位同学主动跑到黑板这边写了如下的代码：

运行下面代码
复制代码

<!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>MAKER</title>
</head>
<body>
<div id="log">
Log:
</div>
<input id="text">data</input>

<script>
window.onload = init;

if(console&&console.log) {
var originalLog = console.log;
var log = document.getElementById("log");
console.log = function(arg) {
var eDiv = document.createElement("div");
eDiv.innerHTML = typeof arg === "string" ? arg : arg.toString();
log.appendChild( eDiv );
originalLog.apply(console, arguments);
};
};

function init () {
var eText = document.getElementById("text");
eText.addEventListener("keypress", function( ev ) {
//逻辑全部在这里面, 很简单吧;
var code = ev.which = ev.which ev.keyCode ev.charCode;
console.log( code );
if(code > 80) {
console.log("code>80");
};
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
}
});
};
</script>
</body>
</html>

复制代码

"哎哟，不错哦，这个*x"老师说道："这个就是我们最常用的方法, 直接为元素绑定了keypress事件，然后通过这个事件的回调对用户的输入进行处理";

如果在事件里面的代码多了, 我们又可以把事件的代码单独取出来作为一个函数:

运行下面代码
复制代码

<!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>MAKER</title>
</head>
<body>
<div id="log">
Log:
</div>
<input id="text">data</input>

<script>
window.onload = init;

if(console&&console.log) {
var originalLog = console.log;
var log = document.getElementById("log");
console.log = function(arg) {
var eDiv = document.createElement("div");
eDiv.innerHTML = typeof arg === "string" ? arg : arg.toString();
log.appendChild( eDiv );
originalLog.apply(console, arguments);
};
};
var 我是事件 = function(ev) {
//逻辑全部在这里面, 很简单吧;
var code = ev.which = ev.which ev.keyCode ev.charCode;
console.log( code );
if(code > 80) {
console.log("code>80");
};
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
};
function init () {
var eText = document.getElementById("text");
eText.addEventListener("keypress", function( ev ) {
我是事件(ev);
});
};
</script>
</body>
</html>

复制代码

看起来清楚多了是吧, 但是在大的项目中(我说的是如果哇), 我们想要充分解耦代码, 可以事件里面的代码全部重新分开:

函数1 ：console.log( code );

函数２：

if(code > 80) {

console.log("code>80");

};

函数３：　
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
好吧，现在问题来了．．．．

现在有要上菜了哇，　ＪＳ中的自定义事件， 充分利用JS的事件机制，
抄自百科：对于自定义事件最需要了解的一点是，您的代码必须导致这些事件发生。这些事件不会为响应用户或系统的动作而自动发生，即使能够编写导致事件确实以这种方式发生的代码也不例外。包含自定义事件的类模块还必须包括一个唤起事件的公有方法。这个方法通过调用 RaiseEvent 语句并传入为事件定义的任何参数来唤起事件。这些参数按顺序传入为响应事件而运行的事件过程中
自定义事件就是一种的设计模式,比如订阅者发布者模式, 观察者模式等等, 都是自定义事件基础上的模式(个人观点, 勿拍砖), 关键是很多大神写代码喜欢用这一种模式写, 那么我们也可以借鉴, 这样就够了;
我们现在把上面那段通过自定义事件的方式写出来：

运行下面代码
复制代码

<!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>MAKER</title>
</head>
<body>
<script>
//d为目标对象, b为一个函数对象;
var __extends = this.__extends function (d, b) {
//继承了静态属性
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
//继承了原型
__.prototype = b.prototype;
d.prototype = new __();
};

var EventEmitter = (function () {
function EventEmitter() {
this._events = {};
}
EventEmitter.prototype.emit = function (type) {
var _this = this;
var args = [];
for (var _i = 0; _i < (arguments.length - 1); _i++) {
args[_i] = arguments[_i + 1];
}
// If there is no 'error' event listener then throw.
if (type === 'error') {
if (!this._events[type] (Array.isArray(this._events[type]) && !this._events[type].length)) {
if (args[0] instanceof Error) {
throw args[0];
} else {
throw new Error("Uncaught, unspecified 'error' event.");
}
return false;
}
}
if (this._events[type]) {
this._events[type].forEach(function (handler) {
return handler.apply(_this, args);
});
return true;
}
return false;
};

EventEmitter.prototype.addListener = function (type, listener) {
if ('function' !== typeof listener) {
throw new Error('addListener only takes instances of Function');
}
var events = this._events;
var listeners = events[type];
if (!listeners)
listeners = events[type] = [];
else if (listeners.indexOf(listener) >= 0)
return this;
listeners.push(listener);
return this;
};

EventEmitter.prototype.removeListener = function (type, listener) {
var events = this._events;
if (!events[type])
return this;
var listeners = events[type];
var i = listeners.indexOf(listener);
if (i >= 0)
listeners.splice(i, 1);
return this;
};
return EventEmitter;
})();

//写一个小的案例, 为了充分解耦代码, 我们可以把代码通过自定义的事件分成几个模块;

</script>

<input id="text">data</input>

<script>
window.onload = init;
function init () {
var TextEvent = (function(Emiter) {
__extends(TextEvent, Emiter);
function TextEvent() {
Emiter.apply(this);
};
return TextEvent;
}.call(TextEvent,EventEmitter));

//创建了这个实例;
var textEvent = new TextEvent();

//为实例添加自定义事件;
textEvent.addListener("keypress", function preventDefault(ev) {
ev.preventDefault();
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which ev.keyCode ev.charCode;
console.log( code );
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which ev.keyCode ev.charCode;
if(code > 80) {
console.log("code>80");
};
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which ev.keyCode ev.charCode;
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
});

document.getElementById("text").addEventListener("keypress", function( ev ) {
textEvent.emit("keypress",ev)
});
};
</script>
</body>
</html>

复制代码

楼主你他妈在逗我？ 这么多

实现要懂JS的继承：

//d为目标对象, b为一个函数对象;
var __extends = this.__extends function (d, b) {
//继承了静态属性
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
//继承了原型
__.prototype = b.prototype;
d.prototype = new __();
};

其次呢， 自定义事件的代码要懂, 很多地方都有用到;
+ View Code

最后通过组合继承, 实现了一个自定义事件类方法：

var TextEvent = (function(Emiter) {
__extends(TextEvent, Emiter);
function TextEvent() {
Emiter.apply(this);
};
return TextEvent;
}.call(TextEvent,EventEmitter));

我们通过实例化TextEvent, 为这个实例添加自定义的方法;

在onkeypress的事件回调触发自定义事件textEvent.emit("keypress",ev), 最后的最后只要为textEvent绑定自定义事件即可,这样做的优势就是： 我们可以通过removeListener去除事件， 事件函数也可以直接复用, 很灵活

时间： 2024-04-25 21:43:39

JavaScript使用自定义事件实现简单的模...的相关文章

JavaScript使用自定义事件实现简单的模块化开发

WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有:     UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我们要对用户输入的字符串进行过滤, 或者是截获用户的输入进行处理的话, 我们要肿么办  同学们纷纷举手说:"老师,我知道,是使用添加事件", 老师也很欣慰地点了点头, 这群家伙真的是越来越聪明了, 老师又问了"如果要取消用户的输入怎么办了", 坐在最前排眼睛最小的

详解javascript实现自定义事件_javascript技巧

我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序 1.js所支持的浏览器默认事件 浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件. js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如: //DOM0级事件处理程序 var oDiv = docum

jQuery自定义事件的简单实现代码_jquery

一.需求原因虽然JQuery为我们定义了许多的事件,但是有时候还是不能满足我们的要求,故本例实现一个自定义事件实现的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv=&quo

JavaScript中自定义事件的学习笔记

在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了.那么,什么是js中的自定义事件呢?我们先来看一个例子: 前端开发员A封装了一个函数:  代码如下 复制代码 function move(){     alert(a);  //以此来代表N行代码 } 过段时间,前端开发员B要在A的基础上丰富这个函数,于是,他会这样写:  代码如下 复制代码 function move(){     alert(a); 

Qt学习之路(23):自定义事件

Qt允许你创建自己的事件类型,这在多线程的程序中尤其有用,当然,也可以用在单线程的程序中,作为一种对象间通讯的机制.那么,为什么我需要使用事件,而不是使用信号槽呢?主要原因是,事件的分发既可以是同步的,又可以是异步的,而函数的调用或者说是槽的回调总是同步的.事件的另外一个好处是,它可以使用过滤器. Qt中的自定义事件很简单,同其他类似的库的使用很相似,都是要继承一个类进行扩展.在Qt中,你需要继承的类是QEvent.注意,在Qt3中,你需要继承的类是QCustomEvent,不过这个类在Qt4中

详解JavaScript中的自定义事件编写_基础知识

我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp

JavaScript自定义事件介绍_javascript技巧

很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率. 简单的事件需求 事件并不是可有可无,在某些需求下是必需的.以一个很简单的需求为例,在web开发中Dialog很常见,每个Dialog都有一个关闭按钮,按钮对应Dialog的关闭方法,代码看起来大概是这样 复制代码

JavaScript 自定义事件的学习笔记

JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件,在叙述自定义事件有何好处之前,先来看一个自定义事件的例子:  代码如下 复制代码 <div id="testBox"></div> // 创建事件 var evt = document.createEvent('Event'); // 定义事件类型 evt.initEvent('customEvent', true, true); // 在元素上监听事件 var

Jquery 自定义事件实现发布/订阅的简单实例_jquery

Jquery 自定义事件实现发布/订阅的简单实例 //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 $('#logoff').click(function(){ $.event.trigger("logoff");//广播一个事件 window.location = "logoff.php";//导航到新页面 }); 以上这篇Jquery 自定义事件实现发布/订阅的简单实例就是小编分享给大家的全部内容