事件对象e的实现原理

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

 

事件对象传递原理

一、前置知识回顾

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

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里面也能找到。

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

如今咱们来模拟一个事件对象参数的传递过程：

定义一个事件对象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。这样使用就方便了。

这就是事件对象传递原理