鹹魚前端 js 事件

2021-10-04 06:15:00 字數 2602 閱讀 2535

事件事件:觸發-響應機制

event介面表示在dom中發生的任何事件,一些是使用者生成的(例如滑鼠或鍵盤事件),而其他由api生成。

事件三要素

事件的基本使用

var box = document.

getelementbyid

('box');

box.

onclick

=function()

;

繫結事件監聽函式

方法是用addeventlistener()attachevent()來繫結事件監聽函式。

addeventlistener

()函式語法:

elementobject.

addeventlistener

(eventname,handle,usecapture)

;

引數

說明eventname

事件名稱。 注意,這裡的事件名稱沒有「 on 」,如滑鼠單擊事件 click ,滑鼠雙擊事件 doubleclick ,滑鼠移入事件 mouseover,滑鼠移出事件 mouseout 等。

handle

事件控制代碼函式,即用來處理事件的函式。

usecapture

boolean型別,是否使用捕獲,一般用false (冒泡)。

attachevent

()函式語法:

elementobject.

attachevent

(eventname,handle)

;

引數

說明eventname

事件名稱。注意,與addeventlistener()不同,這裡的事件名稱有「 on 」,如滑鼠單擊事件 onclick ,滑鼠雙擊事件 ondoubleclick ,滑鼠移入事件 onmouseover,滑鼠移出事件 onmouseout 等。

handle

事件控制代碼函式,即用來處理事件的函式。

addeventlistener()attachevent()區別

元素繫結/解綁事件

用什麼方式繫結就用對應方式解綁

1.物件.on事件名稱

//繫結:物件.on事件名字=事件處理函式

document.

getelementbyid

("id").

onclick

=function()

;//解綁:物件.on事件名字=null;

document.

getelementbyid

("id").

onclick

=function()

;

2.addeventlistener

//繫結:物件.addeventlistener("沒有on的事件型別",命名函式,false);

document.

getelementbyid

("id").

addeventlistener

("click"

,f1,

false);

//解綁:物件.removeeventlistener("沒有on的事件型別",函式名字,false);

document.

getelementbyid

("id").

removeeventlistener

("click"

,f1,

false

);

3.attachevent

//繫結:物件.attachevent("on事件型別",命名函式);

document.

getelementbyid

("id").

attachevent

("onclick"

,f1)

;//解綁:物件.detachevent("on事件型別",函式名字);

document.

getelementbyid

("id").

.detachevent

("onclick"

,f1)

;

相容**
//為任意乙個元素繫結事件:元素,事件型別,事件處理函式

function

addeventlistener

(element,type,fn)

else

if(element.attachevent)

else

}//為任意的乙個元素解綁某個事件:元素,事件型別,事件處理函式

function

removeeventlistener

(element,type,fn)

else

if(element.detachevent)

else

}

鹹魚前端 js 物件的使用

物件的使用 訪問物件屬性 兩種方式訪問屬性 objectname.propertyname或者 objectname propertyname 示例1 示例2 訪問物件方法 法訪問物件方法 objectname.methodname 示例 如果您不使用 訪問 fullname 方法,則將返回函式定義...

鹹魚前端 CSS常用屬性

選擇器屬性 說明標籤選擇器 標籤名 或者元素名 類選擇器 類名多類名選擇器 類名 類名 id選擇器 id名 萬用字元選擇器 使用方法請參考 字型樣式屬性 屬性說明 font size 字型大小大小 font family 字型font weight 字型粗細 font style 字型風格 外觀樣式...

040 Web前端 JS 焦點事件

文件事件 焦點事件 6.22 焦點 js當前正在和使用者發生互動的節點稱為焦點。可以模擬為人類目光匯聚的地方。描述 焦點事件分為獲取焦點和失去焦點事件,分別會在元素節點獲得焦點和失去焦點時自動觸發。語法 獲取焦點 節點.onfocus function 失去焦點 節點.onblur function...