摘要:有兩種事件處理程序的方式。第一種第二種事件當調整瀏覽器的窗口到一個新的寬度或高度時,就會觸發事件。事件在元素獲得焦點時觸發。這個事件冒泡某些瀏覽器不支持。事件在鼠標光標從元素外部首次移動到元素范圍內時觸發。事件這個事件跟蹤鼠標滾輪。
JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門
本文主要簡單介紹以下幾類事件:
UI事件
焦點事件
鼠標與滾輪事件
鍵盤與文本事件
UI事件UI事件是指那些不一定與用戶操作有關的事件。
load事件此事件為當頁面完全加載完之后(包括所有的圖像、js文件、css文件等外部資源),就會觸發window上面的load事件。
有兩種onload事件處理程序的方式。
//第一種 EventUtil.addHandler(window, "load", function(){ alert("load"); }); //第二種
圖像也可以觸發load事件,無論是在DOM中的圖像元素還是HTML中的圖像元素。
//第一種 //第二種 var img=document.getElementById("img"); EventUtil.addHandler(img,"load",function(){ event=EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); });unload事件
此事件在文檔被完全卸載后觸發。用戶從一個頁面切換到另一個頁面就會被觸發。
有兩種定義onunload事件處理程序的方式。
//第一種 EventUtil.addHandler(window, "unload", function(){ alert("load"); }); //第二種resize事件
當調整瀏覽器的窗口到一個新的寬度或高度時,就會觸發resize事件。這個事件在window(窗口)上面觸發。
EventUtil.addHandler(window, "resize", function(){ alert("resized"); });scroll事件
這個事件會在文檔被滾動期間重復被觸發,所以應當盡量保持事件處理程序的代碼簡單。
//可以通過scrollLeft和scrollTop監控變化 EventUtil.addHandler(window, "scroll", function(){ alert(document.body.scrollTop); });焦點事件
焦點事件會在頁面元素獲得或失去焦點時觸發。
blur事件在元素失去焦點時觸發。這個事件不冒泡,所有瀏覽器都支持。
focus事件在元素獲得焦點時觸發。這個事件不冒泡,所有瀏覽器都支持。
focusin事件在元素獲得焦點時觸發。這個事件冒泡,某些瀏覽器不支持。
focusout事件在元素失去焦點時觸發。這個事件冒泡,某些瀏覽器不支持。
注意:即使blur和focus不冒泡,也可以在捕獲階段偵聽到他們。
用戶單擊鼠標左鍵或按下回車鍵觸發
dbclick事件用戶雙擊鼠標左鍵觸發。
mousedown事件在用戶按下了任意鼠標按鈕時觸發。
mouseup事件在用戶釋放鼠標按鈕時觸發。
mouseenter事件在鼠標光標從元素外部首次移動到元素范圍內時觸發。此事件不冒泡。
mouseleave事件元素上方的光標移動到元素范圍之外時觸發。此事件不冒泡。
mousemove事件光標在元素的內部不斷的移動時觸發。
mouseover事件鼠標指針位于一個元素外部,然后用戶將首次移動到另一個元素邊界之內時觸發。
mouseout事件用戶將光標從一個元素上方移動到另一個元素時觸發。
mousewheel事件這個事件跟蹤鼠標滾輪。
鍵盤與文本事件 keydown事件一次click事件觸發順序
mousedown --> mouseup --> click
當用戶按下鍵盤上的任意鍵時觸發。按住不放,會重復觸發。
keypress事件當用戶按下鍵盤上的字符鍵時觸發。按住不放,會重復觸發。
keyup事件當用戶釋放鍵盤上的鍵時觸發。
鍵碼用戶按了一下鍵盤上的字符鍵時事件觸發順序 keydown --> keypress--> keyup
如果用戶按下字符鍵不放時,就會重復觸發keydown --> keypress
如果用戶按下非字符鍵時,就會觸發keydown --> keyup
在觸發事件時,event對象的keyCode屬性會包含一個代碼,與鍵盤上的一個特定鍵對應。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89354.html
摘要:專題系列共計篇,主要研究日常開發中一些功能點的實現,比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點是研究專題之函數組合專題系列第十六篇,講解函數組合,并且使用柯里化和函數組合實現模式需求我們需要寫一個函數,輸入,返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇,講解如何從零實現一個 jQuery 的 ext...
摘要:響應某個事件的函數就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理,把事件加到父元素或祖先元素上,觸發執行效果,解決事件處理程序過多問題。事件委托優點提高性能。 JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門 事件 JavaScript與HTML之間的交互是通過事件實現的...
摘要:,開始我們的第一篇單一職責。通過解耦可以讓每個職責工更加有彈性地變化。關于本文本文轉自大叔的深入理解系列。深入理解系列文章,包括了原創,翻譯,轉載,整理等各類型文章,原文是大叔的一個非常不錯的專題,現將其重新整理發布。 前言 Bob大叔提出并發揚了S.O.L.I.D五大原則,用來更好地進行面向對象編程,五大原則分別是: The Single Responsibility Princi...
摘要:模塊化是隨著前端技術的發展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為和。特別指出,事件不等同于異步,回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React,本人對寫代碼有潔癖,代碼也是藝術。此篇是準備篇,工欲善其事,必先利其器。我們先在代...
閱讀 3551·2021-10-09 09:43
閱讀 6149·2021-09-07 10:15
閱讀 2746·2019-08-30 14:03
閱讀 3074·2019-08-29 11:01
閱讀 1715·2019-08-29 10:56
閱讀 1074·2019-08-28 17:52
閱讀 3502·2019-08-26 11:42
閱讀 2547·2019-08-26 10:33