事件对象e的实现原理

转自：https://segmentfault.com/q/1010000007337410?_ea=1313467

 

事件对象传递原理

1、前置知识回顾

在讲传递原理前，我们先看看普通函数是如何传递参数的：

    let num1=1,num2=2,num3=3;
    function foo(){
        console.log(arguments);
    }
    
    function foo1(a,b,c){
        console.log(a,b,c);
    }
    
    foo(num1,num2,num3,num1,num2);
    foo1(num1,num2);

可以从例子中看到，给函数传递参数，是在我们执行函数的时候才能进行的。在建立函数的时候，不管你设定形参也好，还是不设定形参，都不影响函数参数的传递。

关键在于谁能执行函数，谁就能给函数传递参数。

我们设定形参，形参就能接收对应位置的实参。不设定形参，在arguments里面也能找到。

2、事件对象参数的传递模拟

现在我们来模拟一个事件对象参数的传递过程：

定义一个事件对象myEvent：

    let myEvent={
        type:"点击",
        clientX:"x方向坐标",
        clientY:"y方向坐标",
        target:"事件源"
    }

写一个事件函数：

function fn(){
   console.log(arguments[0]);
}

ele.onclick=fn;

假设我是点击事件，当触发我的时候，我就会执行fn函数：

fn(myEvent);

然后就会打印出参数。

执行fn不是开发人员去做的，所以开发人员不能传递实参给fn。只有事件自己可以传递实参给fn，那它现在想传的就是myEvent。

所以，对于开发人员而言，才说这个事件对象是自动传递进去的。

那为了方便，开发人员可以给fn函数设定形参，来接收这个自动传入的事件对象：

function fn(e){
    console.log(e);
    console.log(e.type);
}

触发事件，事件方法执行的时候，传入实参myEvent，这个实参自然会赋值给形参e，所以，e=myEvent。这样使用就方便了。

这就是事件对象传递原理