概觀: 在這篇文章中，我們將討論關於JavaScript中的瀏覽器事件. 因為他們執行大多數任務Java腳本的事件是非常重要的. 另外重要的一點是瀏覽器的兼容性. 作為Java腳本嵌入在HTML文件, Java腳本的執行是依賴於瀏覽器. Java腳本也足夠成熟來處理瀏覽器事件.
介紹:
瀏覽器事件是從瀏覽器到應用程序的情況下執行的動作的信號. 這些事件是下列類型的
- DOM事件: 這些由DOM元素例如啟動. 點擊元素時被觸發click事件或當鼠標指針在元素上盤旋鼠標懸停事件被觸發. 這些事件與文檔連接的Java腳本代碼.
- 窗口事件: 這些都是當調整瀏覽器窗口啟動.
什麼是事件?
一個事件可以被定義為一個操作/工作發送一個信號以Java腳本. 現在，Java腳本響應某些事件執行. 但該事件應註冊發送信號到相應的Java腳本組件. 以下是一些事件.
窗口事件: 當調整瀏覽器窗口中啟動這些事件.
DOM事件: 這些都是當一個DOM元素執行某些操作啟動.
其他事件: 這些事件被考慮所有其它類型的事件的除了上述兩個.
事件處理程序: 我們必須明白，有Java和Java腳本之間有很大的區別. 在java, 多線程是可能的，但Java腳本事件是單線程. 因此，事件處理程序是順序執行. 為了澄清, 讓我們假設一個用戶執行了兩個事件, 鼠標懸停，然後鼠標移動. 因此，鼠標懸停事件將首先執行. 一旦第一個事件完成, mousemove事件會得到執行.
如果一個腳本必須針對事件執行的操作, 它應該有關聯到它的函數. 這些功能被稱為事件處理程序. 通常，這些函數的命名格式 - 上 EVENT_NAME例如. 的onclick等. 在Java腳本事件處理程序是單線程的順序執行. 因此，如果兩個事件發生在同一時間, 他們的處理程序將相繼執行一條. 有很多種方法，使事件處理程序分配. These are.
使用HTML標籤: 事件處理程序可以直接使用上事件屬性相關聯的標記.
Listing 1: Event handler using html tag
[Code]
<輸入ID = “B1” 值= “點我” 的onclick = “警報('謝謝! 我點擊. ‘); ” 類型= “鈕” />
[/Code]
當執行該代碼, 我們看到了一個按鈕，一個標籤 – '點我'. 如果用戶點擊這個按鈕提示窗口，一條消息 – 謝謝! 我點擊. 我們還可以調用事件處理函數. 考慮下面的代碼
Listing 2: 使用功能的事件處理程序
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <HTML> | |||||||||||||||
| <頭> | |||||||||||||||
| <腳本類型=”文/ JavaScript的”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| 為(VAR I = 1; 我 <= 3; 我 ) { | |||||||||||||||
| 警報( “兔子 “+1 ” 的帽子!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </腳本> | |||||||||||||||
| </頭> | |||||||||||||||
| <體> | |||||||||||||||
| <INPUT TYPE = “鈕” 的onclick = “count_rabbits()” 值= “兔子伯爵!”/> | |||||||||||||||
| </體> | |||||||||||||||
| </HTML>[/Code]到綁定事件的另一方法是使用this.innerHTML哪裡此指的是當前元素. 下面的代碼說明了這一點Listing 3: 使用this.innerHTML事件處理
[Code] <按鈕的onclick = “警報 ( this.innerHTML )”> 點擊這裡給我看我 </鈕> [/Code] 使用DOM對象屬性: 在這裡，分配使用屬性做 – 的OnEvent. 在這種情況下，我們需要首先獲取元素，然後處理程序分配給屬性的OnEvent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: 使用DOM對象屬性事件處理 [Code] <輸入ID = “我的身份” 類型= “鈕” 值= “按我”/> <腳本> document.getElementById( ‘ 我的身份 ‘ ).的onclick =功能() { 警報('謝謝') } </腳本> [/Code] 這裡以下兩件事，必須以使用此應注意 – · It is a property, 不是一個屬性，它的名字是一個OnEvent這是大小寫敏感的，應該是小寫. · The handler should be a function not a String. 當瀏覽器中發現的HTML標記的屬性的OnEvent, 它使用其內容創建了一個函數，並將其分配給該屬性. 所以下面兩個代碼不相同 Listing 5: 僅使用HTML事件處理程序 [Code] <INPUT TYPE = “鈕” 的onclick = “警報( '點擊!’ )” 值= “按鍵”/> [/Code] Listing 6: 使用HTML事件處理 & JS. [Code] <INPUT TYPE = “鈕” ID = “鈕” 值= “按鍵”/> <腳本> document.getElementById(“按鈕”).的onclick =功能() { 警報('點擊!’) } </腳本> [/Code] JavaScript的覆蓋處理程序中設置標記. 下面的代碼片段取代了標記處理程序用一個新的 Listing 7: 覆蓋的處理程序集. <輸入類型=”鈕” 的onclick =”警報('之前')” value=”按我”/> <腳本> document.getElementsByTagName(“輸入”)[0].的onclick =功能() { 警報('後') } </腳本> [/Code] 使用特殊方法: 在一個複雜的JavaScript應用程序, 其中，不同的接口方式處理公共事件自定義方法用於分配處理器. 微軟提供了一個解決方案，只有IE瀏覽器版本低於工程 9 並與歌劇. 處理程序被分配和分離為下 Listing 8: 安裝和卸下處理器 element.attachEvent( “上” + 事件, 處理器) [/Code] 刪除處理程序 – [Code] element.detachEvent( “上” + 事件, 處理器) [/Code] 使用附加事件, 我們可以分配多個處理程序，以相同的元素. 下面的代碼片段顯示了這個 Listing 9: 分配多個處理程序，以一個元素. [Code] <輸入ID = “myElement” 類型= “鈕” 值= “按我” /> <腳本> VAR myElement =的document.getElementById( “myElement” ) 行事=功能() { 警報( '謝謝!’ ) } 是行業2 =功能() { 警報( '再次感謝!’ ) } myElement.attachEvent( “點擊時”, 處理器) myElement.attachEvent( “點擊時”, handler2) </腳本> [/Code] 附加的事件沒有通過參數'這個'. 由於按照W3C標準以下處理程序分配工作在今天幾乎都採用所有的瀏覽器. 附加處理程序 Listing 10: 安裝和卸下處理器按照W3C標準 element.addEventListener ( 事件, 處理器, 相 ) [/Code] 元件. removeEventListener ( 事件, 處理器, 相 ) [/Code]
事件相關行動: 我們應採取以下四個動作的照顧，同時處理事件相關的動作 · 註冊事件處理程序: 這可以通過設置的元素的OnEvent屬性例如進行. 的onclick或onkeypress事件等. 這適用於整個瀏覽器，但有我們可以附加只有一個事件處理元素的限制. 所附事件可以在使用detachEvent或removeEventListener類似的方式去除. · 獲取事件對象: 瀏覽器的大部分傳遞事件對象作為參數傳遞給處理程序. 當用戶點擊鼠標他產生了以下三個事件. o MOUSEDOWN: 指示鼠標被按下. o 鼠標鬆開: 指示鼠標被釋放. o Click: 指示鼠標點擊. 如果這種情況發生在繼承, 這表明雙擊發生. · Extract information from the object – 第三步是從物體的提取動作有關的信息，並啟動動作. · Inform about the completion of the event – 這是最後一步. 一旦該事件被成功拍賣事件的結束標記. Summary: 在結束討論，我們可以記住以下幾點 · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM事件和窗口事件. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Java腳本設計模式
CSS3 & JavaScript
Java Script and CSS3 properties
