簡單總結焦點事件 Event事件物件 冒泡事件

每學習一些新的東西，要學會複習，總結和記錄。

今天來簡單總結一下學到的幾個事件：焦點事件、event事件物件、冒泡事件

其實這幾個事件應該往深的說是挺難的，但今天主要是以乙個小菜的角度去嘗試理解一些基本的知識點。

1.焦點事件：

1.1概念理解：

想象場景：當一堆text文字框出現在面前，當點選其中乙個文字框，它就會響應使用者，並出現游標閃動（這時，點選令它獲得焦點）。

所以說：焦點事件是用來讓瀏覽器區分哪乙個物件是使用者要進行操作（輸入值、選擇、跳轉）的。

總結===》瀏覽器（區分）哪乙個物件（是）使用者（要）操作（的）

回到場景來說，就是出現游標那個，它被點選後，與其他文字框不一樣，提示使用者此文字框是可以操作（輸入）的！

1.2設定方式：

點選設定、tab鍵切換、js來設定

（注意：不是所有元素都能接受焦點的：div、p等就不能，只有能夠響應使用者的才可以設定焦點）

1.3.焦點事件（）

obj.onfocus = function ( );：當元素獲取時觸發事件

obj.onblur = function( )  ：當元素失去焦點時觸發

1.4.焦點方法

obj.onfocus();  給指定元素設定焦點

obj.onblur ();  給指定元素失去焦點

obj.select();  選擇指定元素裡面的文字內容

2.event 事件：

在理解冒泡事件和捕獲事件前，先來理解一下什麼叫做 event 事件。

2.1概念：

event：事件物件（事件發生的狀態）

想象場景：當用滑鼠點選乙個按鈕時，當前點選按鈕的（啟用狀態、滑鼠的位置）等資訊，都是點選事件的事件物件

也就是說：事件物件是指　當乙個事件發生時，當前物件發生這個事件的有關資訊

2.2相容性：

event具有相容性問題。

標準下：ie/chrome裡event是乙個內建全域性物件 ，也就是已經進行定義了   var event

非標準下：ff中的事件物件，是通過事件函式的第乙個事件引數傳入的

相容性處理：

1

function
fn1(ev)
56 document.onclick = fn1;        //
通過點選呼叫事件

3.冒泡事件：

3.1概念：

當乙個元素接收到乙個事件時，會將這個事件傳給它的父級，直到最頂層window

123

//已經為div3設定了絕對定位到div1和div2外面45
6

event.canclebubble = true;  //阻止當前物件的當前事件的冒泡

function

fn1()

冒泡效應會將物件當前發生的事件傳遞傳遞到父級，這乍一看讓人感覺非常不好，但總的來說， 冒泡還是利大於弊的。接下來討論乙個有關利方面的例子。

思路：學習了冒泡我們知道，具有事件傳遞的效果，當我們滑鼠滑動到」分享到「時，自動就有乙個onmouserover事件發生了（滑鼠事件），這時這個事件會傳遞到他的父級，因此我們只要去設定父級的onmouseover事件就可以了，分別是滑鼠移入left為0px；移出left=-100px;

分享到

var odiv1 = document.getelementbyid('div1');
var odiv2 = document.getelementbyid('div2');
//根據事件冒泡機制,odiv2.onmouseover是發生的只是沒有寫出來，
//因此會觸發父級的onmouseover事件，即使沒有碰到父級，也可以通過div2的事件傳給父級元素
odiv1.onmouseover = function
();    odiv1.onmouseout = function
();

事件型別 焦點事件

ui事件 焦點事件 滑鼠事件 滾輪事件 文字事件 鍵盤事件 合成事件 變動事件 焦點事件 當頁面元素獲得或失去焦點時觸發焦點事件。1.blur 失去焦點時觸發 不會冒泡 2.domfocusin 元素獲得焦點時觸發 只有opera支援 3.domfocusout 元素失去焦點時觸發 只有opera支...

laravel事件event簡單例項

生成事件類 監聽類 php artisan event generate事件類blo iew中寫入要觸發的事件 use illuminate broadcasting channel use illuminate queue serializesmodels use illuminate broad...

事件物件event

1.e.client 相對於當前頁面 視窗，不是這個元素 可視區域的左頂點 document.onmousemove function e 2.e.screen 相對於計算機螢幕的左頂點 document.body.onclick function e 3.offset 事件觸發時滑鼠距離該元素左邊...