事件对象e的实现原理

事件对象e的实现原理
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说事件对象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。这样使用就方便了。

这就是事件对象传递原理

转载于:https://www.cnblogs.com/jacksplwxy/p/10809959.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29854

发表评论