JavaScript系列之事件類型

時間 2019-11-06

標籤 javascript 系列事件類型欄目 JavaScript 简体版

原文原文鏈接

JavaScript簡單入門能夠看看我醜醜的Github博客JavaScript簡單入門javascript

本文主要簡單介紹如下幾類事件：css

UI事件
焦點事件
鼠標與滾輪事件
鍵盤與文本事件

UI事件

UI事件是指那些不必定與用戶操做有關的事件。html

load事件

此事件爲當頁面徹底加載完以後（包括全部的圖像、js文件、css文件等外部資源），就會觸發window上面的load事件。
有兩種onload事件處理程序的方式。java

//第一種
EventUtil.addHandler(window, "load", function(){
      alert("load");
});
//第二種
<body onload="alert('load')"></body>

圖像也能夠觸發load事件，不管是在DOM中的圖像元素仍是HTML中的圖像元素。git

//第一種
<img src="smile.png" onload="alert('loaded')">　
//第二種
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
      event=EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

unload事件

此事件在文檔被徹底卸載後觸發。用戶從一個頁面切換到另外一個頁面就會被觸發。
有兩種定義onunload事件處理程序的方式。github

//第一種
EventUtil.addHandler(window, "unload", function(){
      alert("load");
});
//第二種
<body onunload="alert('load')"></body>

resize事件

當調整瀏覽器的窗口到一個新的寬度或高度時，就會觸發resize事件。這個事件在window（窗口）上面觸發。瀏覽器

EventUtil.addHandler(window, "resize", function(){
      alert("resized");
});

scroll事件

這個事件會在文檔被滾動期間重複被觸發，因此應當儘可能保持事件處理程序的代碼簡單。指針

//能夠經過scrollLeft和scrollTop監控變化
EventUtil.addHandler(window, "scroll", function(){
      alert(document.body.scrollTop);
});

焦點事件

焦點事件會在頁面元素得到或失去焦點時觸發。code

blur事件

在元素失去焦點時觸發。這個事件不冒泡，全部瀏覽器都支持。htm

focus事件

在元素得到焦點時觸發。這個事件不冒泡，全部瀏覽器都支持。

focusin事件

在元素得到焦點時觸發。這個事件冒泡,某些瀏覽器不支持。

focusout事件

在元素失去焦點時觸發。這個事件冒泡，某些瀏覽器不支持。
注意：即便blur和focus不冒泡，也能夠在捕獲階段偵聽到他們。

鼠標與滾輪事件

click事件

用戶單擊鼠標左鍵或按下回車鍵觸發

dbclick事件

用戶雙擊鼠標左鍵觸發。

mousedown事件

在用戶按下了任意鼠標按鈕時觸發。

mouseup事件

在用戶釋放鼠標按鈕時觸發。

mouseenter事件

在鼠標光標從元素外部首次移動到元素範圍內時觸發。此事件不冒泡。

mouseleave事件

元素上方的光標移動到元素範圍以外時觸發。此事件不冒泡。

mousemove事件

光標在元素的內部不斷的移動時觸發。

mouseover事件

鼠標指針位於一個元素外部，而後用戶將首次移動到另外一個元素邊界以內時觸發。

mouseout事件

用戶將光標從一個元素上方移動到另外一個元素時觸發。

mousewheel事件

這個事件跟蹤鼠標滾輪。

一次click事件觸發順序
mousedown --> mouseup --> click

鍵盤與文本事件

keydown事件

當用戶按下鍵盤上的任意鍵時觸發。按住不放，會重複觸發。

keypress事件

當用戶按下鍵盤上的字符鍵時觸發。按住不放，會重複觸發。

keyup事件

當用戶釋放鍵盤上的鍵時觸發。

用戶按了一下鍵盤上的字符鍵時事件觸發順序 keydown --> keypress--> keyup
若是用戶按下字符鍵不放時，就會重複觸發keydown --> keypress
若是用戶按下非字符鍵時，就會觸發keydown --> keyup

鍵碼

在觸發事件時，event對象的keyCode屬性會包含一個代碼，與鍵盤上的一個特定鍵對應。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。