瀏覽器事件小析

2022-08-16 21:54:20 字數 2462 閱讀 4140

一、焦點事件

焦點:使瀏覽器能夠區分使用者輸入的物件,當乙個元素有焦點的時候,那麼他就可以接收使用者輸入;我們可以通過一些方

式設定焦點:1.點選,2.tab,3.js;不是所有的元素都能接收焦點,能夠響應使用者操作的元素才有焦點。

事件:onfocus ==>當元素獲取焦點時觸發

onblur ==>當元素失去焦點時觸發

方法:obj.focus(); ==>給元素新增焦點的方法

obj.blur(); ==>給元素新增失去焦點的方法

obj.select(); ==>選擇指定元素裡面的文字內容(複製內容);只能選中使用者輸入的可互動的內容

二、event物件

evert:事件物件,當乙個事件發生時,和當前這個物件發生的這個事件有關的一些詳細的資訊都會被臨時儲存在乙個指定

的地方--event物件供我們在需要時候呼叫。

事件物件必須在乙個事件呼叫的函式裡使用才有內容。

事件函式:事件呼叫的函式,乙個函式是不是事件函式取決於這個函式呼叫的時候。

eg:function fn()

fn();  //不是事件函式

document.onclick=fn;  //事件函式呼叫

相容性問題:

ie/chorme:event是乙個內建全域性物件,可直接如上例直接呼叫

標準瀏覽器:事件物件是通過事件函式的第乙個引數傳入,如果乙個函式時被事件呼叫,那麼這個函式定義的第乙個引數

就是事件物件。

相容性問題處理:

function fn(ev)

補充:clientx[y] ==>當乙個事件發生時,滑鼠到頁面可視區距離(無單位)

onmousemove ==>當滑鼠在乙個元素上移動時觸發;觸發頻率是間隔時間,在乙個指定時間(很短),如果滑鼠的位置和

上一次位置發生變化,就觸發一次。

三、事件流

事件冒泡:當乙個元素接收到事件的時候,會把他接收到的所有傳播給他的父級,一直到頂層window。(div->body-

>html->document->window)

阻止冒泡:當前要阻止冒泡的事件函式中呼叫 event.cancelbubble=true;

事件捕獲:從外到內,父類先觸發,子類後觸發。(window->document->html->body->div)

四、事件繫結及解除繫結

1.給乙個物件繫結乙個事件處理函式的第一種形式

obj.onclick=fn; //繫結

obj.onclick=null; //解除

2.給乙個物件同一事件繫結不同函式

ie:obj.attachevent(事件名稱,事件函式); //繫結

obj.detachevent(事件名稱,事件函式); //解除

標準瀏覽器:obj.addeventlistener(事件名稱,事件函式,是否捕獲); //繫結==>第三引數預設:false,不補獲,冒泡

obj.removeeventlistener(事件名稱,事件函式,是否捕獲); //解除

ie和標準瀏覽器繫結事件的區別:

ie:(1)沒有捕獲

(2)事件名稱帶有on

(3)事件函式執行順序:標準ie->正序,非標準ie->倒序

(4)this指向window ==》解決,函式下的乙個方法call(),call方法一參可改變函式執行過程中內部this的指向,call

的二參開始是原函式的引數列表。

eg:function fn(a,b)

fn; //指向window

fn.call(1) //1

fn.call(1,10,20) //30

fn.call(null,10,20) //指向window

標準瀏覽器:

(1)有事件捕獲

(2)事件名稱無on

(3)事件執行順序是正序

(4)this指向觸發該事件物件

因此,封裝繫結事件:

function bind(obj,evname,fn)

}else)

}五、鍵盤事件

onkeydown ==>當鍵盤按鍵按下的時候觸發,如果按下不抬起,那麼會連續觸發

onkeyup ==>當鍵盤按鍵抬起的時候觸發

event.keycode:數字型別屬性,返回鍵盤按鍵的值,鍵盤上每乙個不同功能的鍵對應不同的ascii碼值

ctrlkey,shiftkey,altkey:布林值型別的屬性,當乙個事件發生時,如果ctrl,shift,alt是按下狀態,返回true,否

則返回false

注:不是所有的元素都能接收鍵盤事件,能夠響應使用者輸入的元素,能夠接收焦點的元素就能夠接收鍵盤事件。

六、事件預設行為(預設事件)

當乙個事件發生時,瀏覽器自己會預設做的事情

如何阻止?

1.當前這個行為是什麼事件觸發的

2.然後在這個事件的處理函式中使用return false

eg: oncontextmenu ==>右鍵選單顯示出來時觸發

瀏覽器事件

常用瀏覽器事件與dom事件,包括滑鼠事件 鍵盤事件 框架 物件事件 表單事件 剪貼簿事件 列印事件 拖動事件 多 事件 動畫事件 過渡事件。onbeforeinstallprompt 當使用者即將被提示安裝web應用程式時,該處理程式將在裝置上排程,其相關聯的事件可以儲存以供稍後用於在更適合的時間提...

瀏覽器事件

常用瀏覽器事件與dom事件,包括滑鼠事件 鍵盤事件 框架 物件事件 表單事件 剪貼簿事件 列印事件 拖動事件 多 事件 動畫事件 過渡事件。onbeforeinstallprompt 當使用者即將被提示安裝web應用程式時,該處理程式將在裝置上排程,其相關聯的事件可以儲存以供稍後用於在更適合的時間提...

瀏覽器事件模型

我想你很可能聽說過事件驅動,但是事件驅動到底是什麼?為什麼說瀏覽器是事件驅動的呢?為什麼 nodejs 也是事件驅動的 兩者是一回事麼?實際上不管是瀏覽器還是 nodejs 都是事件驅動的,都有自己的事件模型。在這裡,我們只講解瀏覽器端的事件模型,如果對 nodejs 事件模型感興趣的,請期待我的 ...