事件對象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。這樣使用就方便了。

這就是事件對象傳遞原理