焦點事件會在頁面獲得或失去焦點時觸發(fā)。利用這些事件并與 document.hasFocus()方法及 document.activeElement 屬性配合,可以知曉用戶在頁面上的行蹤。有以下 6 個焦點事件。
blur:在元素失去焦點時觸發(fā)。這個事件不會冒泡;所有瀏覽器都支持它。
DOMFocusIn:在元素獲得焦點時觸發(fā)。這個事件與 HTML 事件 focus 等價,但它冒泡。只有 Opera 支持這個事件。DOM3 級事件廢棄了 DOMFocusIn,選擇了 focusin。
DOMFocusOut:在元素失去焦點時觸發(fā)。這個事件是 HTML 事件 blur 的通用版本。只有 Opera 支持這個事件。DOM3 級事件廢棄了 DOMFocusOut,選擇了 focusout。
focus:在元素獲得焦點時觸發(fā)。這個事件不會冒泡;所有瀏覽器都支持它。
focusin:在元素獲得焦點時觸發(fā)。這個事件與 HTML 事件 focus 等價,但它冒泡。支持這個事件的瀏覽器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
focusout:在元素失去焦點時觸發(fā)。這個事件是 HTML 事件 blur 的通用版本。支持這個事件的瀏覽器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
這一類事件中最主要的兩個是 focus 和 blur,它們都是 JavaScript 早期就得到所有瀏覽器支持的事件。這些事件的最大問題是它們不冒泡。因此,IE 的 focusin 和 focusout 與 Opera 的 DOMFocusIn
和 DOMFocusOut 才會發(fā)生重疊。IE 的方式最后被 DOM3 級事件采納為標準方式。
當焦點從頁面中的一個元素移動到另一個元素,會依次觸發(fā)下列事件:
(1) focusout 在失去焦點的元素上觸發(fā);
(2) focusin 在獲得焦點的元素上觸發(fā);
(3) blur 在失去焦點的元素上觸發(fā);
(4) DOMFocusOut 在失去焦點的元素上觸發(fā);
(5) focus 在獲得焦點的元素上觸發(fā);
(6) DOMFocusIn 在獲得焦點的元素上觸發(fā)。
其中,blur、DOMFocusOut 和 focusout 的事件目標是失去焦點的元素;而 focus、DOMFocusIn 和 focusin 的事件目標是獲得焦點的元素。
要確定瀏覽器是否支持這些事件,可以使用如下代碼:
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
本文僅限內(nèi)部技術(shù)人員學習交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://syshcw.cn/如轉(zhuǎn)載請注明出處!