javascript中的事件，javascript事件

javascript中的事件，javascript事件

        在javascript中的事件有三個方面的知識，一是事件流，二是事件處理常式，三是事件對象。下面就我個人的一點理解，分別講述一下這三個方面的內容。

        第一、事件流

                事件流指的是事件按照一定的順序觸發。它有兩個順序，分別是自上而下和自下而上。

                自上而下的叫做事件捕獲，事件捕獲指的是事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔根到事件目標元素之間各個繼承派生的元素所捕獲，如果事件監聽器在被註冊時設定了useCapture屬性為true,那麼它們可以被指派給這期間的任何元素以對事件做出處理；否則，事件會被接著傳遞給衍生元素路徑上的下一元素，直至目標元素。事件到達目標元素後，它會接著通過DOM節點再進行冒泡。

                自下而上的叫做事件冒泡，當事件在某一DOM元素被觸發時，例如使用者在客戶名位元組點上點擊滑鼠，事件將跟隨著該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件類型處理器的節點，此時，該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡，在遵從W3C標準的瀏覽器裡可以通過呼叫事件對象上的stopPropagation()方法，在Internet Explorer裡可以通過設定事件對象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文檔根。

        第二、事件處理常式

                事件處理常式就是捕獲到某個事件之後執行的程式，它有三種方式。

                1、html級事件處理常式，即在html標籤中直接加入事件處理常式。如下所示：

<input type="button" value="button" onclick="alert('hello word!')" />

                2、dom0級事件處理常式，即把一個函數賦值給一個事件的處理常式屬性。代碼如下：

var element=document.getElementById('button');element.onclick=function(){       alert('hello word!');}

               3、dom2級事件處理常式，即通過調用dom對象的addEventListener( )方法註冊事件處理常式。addEventListener()方法需要三個參數，分別是事件名、事件處理常式的函數和useCapture, 一個bool類型，當為false時為冒泡擷取(由裡向外)，true為capture方式(由外向裡)。使用addEventListener方法時需要注意事件名不要加首碼“on”，通過addEventListener方法添加的事件處理常式只能通過removeEventListener才能刪除。通過addEventListener可以為一個dom添加多個相同的事件處理常式並按順序執行。代碼如下：

var element=document.getElementById('button');element.addEventListener('click',function(){alert('hello jim!')},false);element.addEventListener('click',function(){alert('hello jack!')},false);

        

               在不遵循w3c標註的瀏覽器上並不支援addEventListener方法，例如IE8及以下版本的IE瀏覽器和Opera瀏覽器，它們在註冊事件處理常式的時候要用到的是attachEvent方法，刪除事件使用detachEvent，它們分別接收兩個參數，分別是事件名和事件處理的函數。這裡要注意了，使用這兩個方法的時候，事件名必須是要加上首碼“on”的，否則無法識別。

        第三、事件對象。在觸發dom上的事件時都會產生一個事件對象：event。它包含了事件的類型、滑鼠的座標等。我們可以通過event對象target屬性指的觸發事件的dom對象，在IE8及以下瀏覽器中要擷取這個對象要通過srcElement這個屬性來獲得。event對象中的stopPropragation方法是阻止事件冒泡，preventDefault方法阻止預設行為，在IE8及以下瀏覽器中要設定event.cancelBubble=true阻止事件冒泡，設定event.returnValue=false阻止預設行為。

javascript 事件

（1）單擊事件onClick
當使用者單擊滑鼠按鍵時，產生onClick事件。同時onClick指定的事件處理常式或代碼將被調用執行。通常在下列基本對象中產生：
button（按鈕對象）
checkbox（複選框）或（檢查列表框）
radio （單選鈕）
reset buttons（重要按鈕）
submit buttons（提交按鈕）
例如可通過下列按鈕啟用change()檔案：

<Form>
<Input type="button" Value="" onClick="change()">
</Form>

在onClick等號後，可以使用自己編寫的函數作為事件處理常式，也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例：<Input type="button" value=" " onclick=alert("這是一個例子");

（2）onChange改變事件
當利用text或texturea元素輸入字元值改變時發該事件，同時當在select表格項中一個選項狀態改變後也會引發該事件。例：
<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>
（3）選中事件onSelect
當Text或Textarea對象中的文字被加亮後，引發該事件。
（4）獲得焦時間點事件onFocus
當使用者單擊Text或textarea以及select對象時，產生該事件。此時該對象成為前台對象。
（5）失去焦點onBlur
當text對象或textarea對象以及select對象不再擁有焦點、而退到後台時，引發該檔案，他與onFocas事件是一個對應的關係。
（6）載入檔案onLoad
當文檔載入時，產生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，並用一個變數為其賦值，使它可以被原始碼使用。
（7）卸載檔案onUnload
當Web頁面退出時引發onUnload事件，並可更新Cookie的狀態。
 
javascript中的事件問題

onclick加在你寫的按鈕或者連結上，onclick本身就是事件，他的偵聽函數要自己寫的，onclick="定義的函數名"
這樣，當這個按鈕被按下，瀏覽器就會自動調用onclick指向的function