JS知識總結之事件

楊耿直小兄弟發表於2019-04-10

JavaScript 建立動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函式或程式的事件。

比如說,當使用者單擊按鈕或者提交表單資料時,就發生一個滑鼠單擊(onclick)事件,需要瀏覽器做出處理,返回給使用者一個結果。

主要事件表:

事件繫結方法

1、on

obj.onclick = fn;

obj.onclick = fn() {
    //do
}複製程式碼

2、

<button id="btn" onclick="clickfuction()"></button>複製程式碼

以上兩種方法雖然是很常見,但實際開發中我們一般是用第三種方法

3、addEventListener

這個方法只相容ie8以上,ie8及以下需要使用attachEvent

obj.addEventListener("click",function(){
      fn1(parm);
     fn2(parm);},false)複製程式碼
元素.attachEvent( 'onclick', function(){...} );//相容i8及以下複製程式碼

一、js事件之滑鼠單擊事件---onclock

onclick是滑鼠單擊事件,當在網頁上單擊滑鼠時,就會發生該事件。同時onclick事件呼叫的程式塊就會被執行,通常與按鈕一起使用。

二、js事件之滑鼠移入事件---onmouseover

滑鼠經過事件,當滑鼠移到一個物件上時,該物件就觸發onmouseover事件,並執行onmouseover事件呼叫的程式。

三、js事件之滑鼠移開事件---onmouseout

滑鼠移開事件,當滑鼠移開當前物件時,執行onmouseout呼叫的程式。

四、js事件之獲得焦點事件---onfocus

當網頁中的物件獲得聚點時,如表單物件,執行onfocus呼叫的程式就會被執行。

五、js事件之失去焦點事件---onblur

onblur事件與onfocus是相對事件,當游標離開當前獲得聚焦物件的時候,觸發onblur事件,同時執行被呼叫的程式。

六、js事件之文字域文字選中事件---onselect

選中事件,當文字框或者文字域中的文字被選中時,觸發onselect事件,同時呼叫的程式就會被執行。

七、js事件之文字域文字改變事件---onchange

通過改變文字框的內容來觸發onchange事件,同時執行被呼叫的程式。

八、js事件之載入事件---onload

事件會在頁面載入完成後,立即發生,同時執行被呼叫的程式。
注意:1. 載入頁面時,觸發onload事件,事件寫在<body>標籤內。

九、js事件之解除安裝事件---onUnload

當使用者退出頁面時(頁面關閉、頁面重新整理等),觸發onUnload事件,同時執行被呼叫的程式。

注意:不同瀏覽器對onunload事件支援不同。


相關文章