首頁  >  文章  >  web前端  >  利用js實作事件處理模型

利用js實作事件處理模型

亚连
亚连原創
2018-05-19 14:35:191383瀏覽

本篇文章主要介紹了利用js實現事件處理模型,對初學這具有一定的參考價值,有興趣的夥伴們可以參考一下。

在各種瀏覽器中存在四個事件模型:原始事件模型、標準事件模型、IE事件模型,還有一個Netscape4事件模型,以下具體介紹一下。

1、目前共存在四種事件處理模型分別是:原始事件模型、標準事件模型、IE事件模型,還有一種Netscape4事件模型,但基本上可忽略

2、事件處理模型可分為基本事件處理與高階事件處理兩種,原始事件模型屬於基本事件處理,標準事件模型與IE事件模型屬於高階事件處理

一、基本事件處理:

基本事件處理主要是指原始事件模型實現的事件處理。其主要分為以下兩種:

(1)、作為HTML標籤性質的事件處理,如

           //在這裡,而onmouseover只是一個代表,也包含其他很多事件

在這種方式中,賦給onmouseover等事件處理函數的是JS代碼串,系統會把這些代碼串自動包裝在一個匿名函數中。其中可以有this關鍵字,它指向的是這個標籤元素,也可以有event關鍵字,它表示的是事件發生時的事件物件(用在標準瀏覽器中)。如

……

 其實我們可以把onmouseover等看成是一個函數,在沒給它賦值前,它就是一個空函數。給它賦了js程式碼後,就等於往空函數裡加入了程式碼。因為onmouseover等其實是一個函數,所以我們可以顯示的呼叫它,例如 element.onmouseover(),但這樣並不會引起mouseover事件的真正發生。

可以給事件函數(即onmoouseover等)回傳false來舉止預設動作的發生。

函數是運行在定義它的作用域中,因此如果給事件處理函數賦值js程式碼,就相當於在這個HTML標籤環境中定義了一個函數,這種環境比較特殊,它的高一級的作用域並不是window全域物件環境,在這兩者之間還相隔這至少一種作用域環境。而在