JavaScript专精系列(8)——事件机制原理

来源：互联网发布：php 电商编辑：程序博客网时间：2024/06/04 18:42

在DOM操作中，事件对我们而言，是一个神奇的东西，它的内在实现原理，是什么样的？

我们不用讨论，鼠标点击了界面，触发了什么电信号，反应到web网页的过程是什么样的，这个已经超出了JavaScript的范畴了。

我们今天只讨论，从JavaScript的角度，事件的原理是什么？？

描述一个事件的重点有哪些？

搞清楚什么事件，那么必须搞明白，在JavaScript的层面上，什么是JavaScript应该关注的重点？个人认为有这么四个方面：

描述事件的这个对象
描述事件的注册的方法（函数）
描述事件的触发的方法（函数）
描述事件的移除的方法（函数）

在《JavaScript高级程序设计》中，是通过下面的步骤完成一个事件机制的构建过程的。

描述事件的构建过程

1、使用构造函数，描述事件触发的对象。

function EventTarget(){    this.handlers = {}//这个属性是联系事件添加、触发、移除的枢纽}

2、给这个构造函数添加注册事件、触发事件、移除事件的方法

//addHandler事件添加EventTarget.prototype.addHandler = function(type,handlerEvent){    if(typeof this.handlers[type] == "undefined"){        this.handlers[type] = []    }    this.handlers[type].push(handlerEvent);}

解释说明：handlerEvent是添加事件的相应函数。type是事件类型。这个函数的本质，是给this.handlers添加一个类型type，并且值是一个相应事件函数的数组。
//fire事件释放

EventTarget.prototype.fire = function(event){    var arr = this.handlers[event.type];    if(arr && arr.length){        for(var i in arr){             arr[i](event);         }    }}

解释说明：触发事件的本质是查看this.handlers中有没有注册相应的事件类型。也就是查看有没有event.type，如果有，把相应注册的响应函数执行。
//remove移除事件

EventTarget.prototype.remove = 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);    }}

解释说明：移除事件的本质，就是移除这个事件的相应函数。这里的参数，type是类型，handler是响应函数。

一个完整的事件响应示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript</title></head><body>    <div id="root"></div></body><script> function EventTarget() {     this.handlers = {};//意义何在？？？ } EventTarget.prototype = {     constructor: EventTarget,     addHandler: function (type,handler) {         if(typeof this.handlers[type] == 'undefined'){             this.handlers[type] = [];         }         this.handlers[type].push(handler);     },     fire: function (event) {         if(!event.target){             event.target = this;//这个怎么理解？？？？         }         if(this.handlers[event.type] instanceof Array){             var handlers = this.handlers[event.type];             for(var i = 0, len = handlers.length; i < len; i++){                 handlers[i](event);             }         }     },     removeHandler: 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 handleMessage(event) {        alert("Message received:" + event.message);    }    var target = new EventTarget();    //target是什么？定义的一个对象。可以通过这个对象添加事件，也可以通过这个对象触发事件。    //这个事件机制的本质是什么？这个事件的本质就是this.handlers属性，在addhandler的时候，相当于注册这个事件，往事件中push一个函数。在fire情况下，相当于查询type。    //事件的本质意义是什么？事件用于描述行为，而应用逻辑用于处理一些应用层面的东西。    //@notice:redux是什么？    //redux在是描述了一种状态，也在监听一种状态，状态变化，再以一种广播的方式派发出去！！    //固定的状态用一个对象表示！！    //dispatch的本质是用对象的方式，触发一个事件！更改了对象，同时，在这样的状况下，也触发了全局事件函数。这个全局事件函数的本质就是广播的方式进行。 target.addHandler('message',handleMessage); target.fire({type: 'message',message: 'hello world!'});</script></html>

阅读全文

0 0