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

最新推荐文章于 2024-02-13 13:30:45 发布

mapbar_front

最新推荐文章于 2024-02-13 13:30:45 发布

阅读量486

点赞数

文章标签：事件分发事件原理添加事件

本文链接：https://blog.csdn.net/mapbar_front/article/details/78641087

版权

在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>