<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS事件</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<input id="btn1" type="button" value="click1" />
<input id="btn2" type="button" value="click2" />
<input id="btn3" type="button" value="click3" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
观察者模式,是一种一对多的关系,由发布者和订阅者组成,
可以简单对应到事件和事件触发后回调的函数,可以说事件是按照观察者模式设计的.
*/
/*
自定义事件,其实就是观察者模式的一个例子.
说通俗点就是如果程序运行到某个地方,我们希望程序立刻运行绑定的方法.
比如,点击某个按钮希望跳转到下一页.
比如,当某一个条件改变的时候,立刻响应一个函数,弹出个提示框啥的.
*/
var targetEvent = function(){
//事件处理
function eventHandle(dom,type,fn,t){
switch(t){
case 1:
//绑定事件
//事件可以通过dom属性直接绑定,那我们是否可以把事件就当做dom的一个属性!
dom[type] = fn;
break;
case 2:
//触发事件
if(typeof dom[type] == "function"){
dom[type]();
}
break;
case 3:
//删除事件
delete dom[type];
break;
}
}
//dom分析
function analyze(dom,type,fn,t){
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//绑定事件
eventHandle(dom,type,fn,t);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//绑定事件
eventHandle(dom,type,fn,t);
}
}
}
//绑定事件
function bind(dom,type,fn){
analyze(dom,type,fn,1);
}
//触发事件
function trigger(dom,type){
analyze(dom,type,{},2);
}
//删除事件
function remove(dom,type){
analyze(dom,type,{},3);
}
return {
bind:bind,
trigger:trigger,
remove:remove
}
}();
/*
var btn1 = document.getElementById("btn1");
//注册自定义事件
targetEvent.bind(btn1,"myclick",function(){
console.log("myclick");
});
//触发事件
targetEvent.trigger(btn1,"myclick");
var btns = document.getElementsByTagName("input");
//注册自定义事件
targetEvent.bind(btns,"btnclick",function(){
console.log("btnclick");
});
//触发事件
targetEvent.trigger(btns,"btnclick");
*/
/*
这就是我理解的最简单的自定义事件了,其实在我看来这并没有太大的实际意义.
前面说到事件是符合观察者模式的,但是这个自定义事件的对象,虽然有那么点意思,但不是全符合订阅加订阅者的关系.
你看在执行触发事件的时候,还需要传入btns(相当于订阅对象).
我所理解的观察者,订阅和订阅者应该是完全没有关系的.
也就是说,我们在执行触发事件的时候,不应该传入btns,
而是应该让订阅自己处理,有多少订阅者订阅了这些事件,然后挨个触发.
顺着这个思路,再改改.
*/
var targetEvent = function(){
//事件类型数据保存
var handler = {};
//事件dom数据保存
var doms = {};
//事件处理
function eventHandle(t,type,dom,fn){
switch(t){
case 1:
//绑定事件
//事件可以通过dom属性直接绑定,那我们是否可以把事件就当做dom的一个属性!
dom[type] = fn;
//保存事件数据
if(!(handler[type] instanceof Array)){
handler[type] = [];
doms[type] = [];
}
handler[type].push(dom[type]);
doms[type].push(dom);
break;
case 2:
//触发事件
var dom = handler[type];
if(dom instanceof Array){
for(var i = 0,len = dom.length; i < len; i++){
var fun = dom[i];
if(typeof fun == "function"){
fun();
}
}
}
break;
case 3:
//删除事件
var dom = handler[type];
if(dom instanceof Array){
for(var i = 0,len = dom.length; i < len; i++){
if(typeof dom[i] == "function"){
//删除绑定dom的属性
delete doms[type][i][type];
//删除数据
handler[type].splice(i,1);
//删除数组之后,下标长度也会修改
i--;
len--;
}
}
}
break;
}
}
//dom分析
function analyze(t,dom,type,fn){
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//绑定事件
eventHandle(t,type,dom,fn);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//绑定事件
eventHandle(t,type,dom,fn);
}
}
}
//绑定事件
function bind(dom,type,fn){
analyze(1,dom,type,fn);
}
//触发事件
function trigger(type){
eventHandle(2,type);
}
//删除事件
function remove(type){
eventHandle(3,type);
}
return {
bind:bind,
trigger:trigger,
remove:remove
}
}();
var btn1 = document.getElementById("btn1");
//注册自定义事件
targetEvent.bind(btn1,"myclick",function(){
console.log("myclick1");
});
//触发事件
targetEvent.trigger("myclick");
//移除事件
targetEvent.remove("myclick");
var btns = document.getElementsByTagName("input");
//注册自定义事件
targetEvent.bind(btns,"myclick",function(){
console.log("myclick2");
});
//触发事件
targetEvent.trigger("myclick");
/*
这样看起来就比较像观察者了,我们有很多dom都订阅了myclick,
所以只要触发了myclick,所有的myclick订阅者都能收到消息.
*/
/*
任何一种模式,在我看来都只是一种思维方式,在软件开发过程中,通过这些方式去解决一些特定的问题.
观察者模式需要有,订阅,派发,删除和订阅者几个要素,只要想明白了这几个要素的关系就不难组织代码.
*/
var observer = function(){
//角色
var subject = {};
//订阅处理
function handler(t,type,obj,fn){
switch(t){
case 1:
//注册订阅
obj[type] = fn;
//保存事件数据
if(!(subject[type] instanceof Array)){
subject[type] = [];
}
subject[type].push(obj[type]);
break;
case 2:
//派发消息
var obj = subject[type];
if(obj instanceof Array){
for(var i = 0,len = obj.length; i < len; i++){
var fun = obj[i];
if(typeof fun == "function"){
fun();
}
}
}
break;
case 3:
//删除订阅
var obj = subject[type];
if(obj instanceof Array){
for(var i = 0,len = obj.length; i < len; i++){
if(typeof obj[i] == "function"){
//删除数据
subject[type].splice(i,1);
//删除数组之后,下标长度也会修改
i--;
len--;
}
}
}
break;
}
}
//注册订阅
function register(obj,type,fn){
handler(1,type,obj,fn);
}
//派发消息
function trigger(type){
handler(2,type);
}
//删除订阅
function remove(type){
handler(3,type);
}
return {
register:register,
trigger:trigger,
remove:remove
}
}();
//观察者1
function Class1(){
this.say = function(){
console.log("class1 say");
}
}
//观察者2
function Class2(){
this.say = function(){
console.log("class2 say");
}
}
var c1 = new Class1();
var c2 = new Class2();
//注册订阅
observer.register(c1,"valuechange",c1.say);
observer.register(c2,"valuechange",c2.say);
//派发订阅
observer.trigger("valuechange");
//删除订阅
observer.remove("valuechange");
/*
知识点:
1.自定义事件实现方法.
2.观察者模式介绍.
*/
</script>
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件是网页中发生的特定情况，例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器，我们可以在这些事件发生时执行相应的代码。常见的事件包括： 1. click：鼠标点击事件 2. keydown/keyup：键盘...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户提及的一个相关技术栈）、“web”（Web开发）以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
如何给javascript js事件传递参数.zip
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
本篇文章将深入探讨如何使用JavaScript来监听和处理键盘事件，以及如何结合jQuery库（如`jquery-1.2.6.js`）和第三方插件（如`jquery.hotkeys.js`）来增强键盘控制的功能。 一、原生JavaScript键盘事件 1. `...
全面，直观javascript的事件
### 知识点详解：JS捕获后台事件 #### 一、概述 在现代Web开发中，JavaScript（简称JS）是实现网页动态交互的核心技术之一。通过JavaScript，开发者可以为网站添加各种各样的功能和效果，提升用户体验。本文将重点...
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件，专为开发者设计，用于快速集成到各种Web应用中，实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
2. **订阅事件**：然后，我们可以通过调用`on`方法来订阅事件，传入事件名和回调函数： ```javascript myEvent.on('myCustomEvent', function(data) { console.log('Event triggered:', data); }); ``` 3. **...
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...