1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    利用javaScript處理常用事件詳解_JavaScript

    來源:腳本之家  責任編輯:小易  

    JS事件指再瀏覽器窗體或者HTML元素上發生的,樂意觸發JS代碼塊運行的行為,下面,我們一起來看看相關事件。

    1.窗體事件

    例如 onload事件:當頁面完全加載完成之后(包括圖像,js文件,css文件等)該事件就會被觸發。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>花狗在線</title>
    		<script>
    		window.onload=function(){
    			var mydiv = document.getElementById("mydiv");
    			alert("頁面加載完成,mydiv的內容是:"+mydiv.innerText);
    		}
    		</script>
    	</head>
    	<body>
    		<div id='mydiv'>我是花狗,花狗的花,花狗的狗。</div>
    	</body>
    </html>
    

    在這里插入圖片描述
    對此還有:

    resize事件:當調整瀏覽器的窗口到一個新的寬度或者高度時,就會觸發resize事件。

    scroll事件:文檔或者瀏覽器窗口被滾動期間會觸發scroll事件。

    焦點事件:指元素對焦點的獲得與失去,如文本框選中或者取消選中。


    2.鼠標事件

    例如當鼠標單擊左鍵,會發生onclick事件:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>花狗在線</title>
    		<style>
    			html,body{
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    		<script>
    		function mouseclick(){
    		alert('頁面被單擊');
    		}
    		</script>
    	</head>
    	<body onclick="mouseclick()">
    		<div id='mydiv'>我是花狗,花狗的花,花狗的狗。</div>
    	</body>
    </html>
    

    注意:將html和body 的樣式表都設置為width: 100%,height: 100%,否則onclick無效。

    在這里插入圖片描述


    3.鍵盤事件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>花狗在線</title>
    		<style>
    			html,body{
    				background-color: aquamarine;
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    		<script>
    		function keydown(event){ 
    			if(event.keyCode==37){
    				alert(event.keyCode +'你按下了左鍵');
    			}
    			if(event.keyCode==38){
    				alert(event.keyCode +'你按下了上鍵');
    			}
    			if(event.keyCode==39){
    				alert(event.keyCode +'你按下了右鍵');
    			}
    			if(event.keyCode==40){
    				alert(event.keyCode +'你按下了下鍵');
    			}
    		}
    		</script>
    	</head>
    	<body onkeydown="keydown(event)">
    	</body>
    </html>
    

    在這里插入圖片描述


    4.常用事件方法(包括窗口事件,鼠標事件,鍵盤事件,文本事件)

     方法      描述
    onabort   圖像加載被中斷
    onblur   元素失去焦點
    onchange    用戶改變域的內容
    onclick   鼠標單擊某個對象
    ondblclick   鼠標雙擊某個對象  
    onerror    當加載文檔或者圖像時發生某個錯誤
    onfocus   元素獲得焦點
    onkeydown  某個鍵盤的鍵被按下
    onkeypress   某個鍵盤的鍵被按下或者按
    onkeyup 某個鍵盤的鍵被松開
    onload    某個頁面或者圖像被完成加載
    onmousedown 某個鼠標按鍵被按下
    onmousemove  鼠標被移動
    onmouseout  鼠標從某元素移開
    onmouseover  鼠標被移到某元素之上
    onmouseup 某個鼠標按鍵被松開
    onreset     重置按鈕被單擊
    onresize   窗口或者框架被調整尺寸
    onselect    文本被選定
    onsubmit     提交按鈕被單擊
    onunload  用戶退出頁面

    5.事件冒泡和事件捕捉

    事件發生就會產生事件流,當一個HTML元素產生一個事件時,該事件會在元素節點和根節點之間按特定的順序轉播,類似于遞和歸。事件觸發方式如下:addEventListener(“click”,“doSomething”,“ture”); 若第三個參數時ture是事件捕捉,若為false,則為事件冒泡,默認是冒泡。

    捕捉型事件傳播:


    在這里插入圖片描述


    冒泡型事件傳播


    在這里插入圖片描述

    到此這篇關于利用javaScript處理常用事件詳解的文章就介紹到這了,更多相關js處理常用事件內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持真格學網!

    您可能感興趣的文章:javascript 處理事件綁定的一些兼容寫法JS事件循環機制event loop宏任務微任務原理解析js事件機制----捕獲與冒泡機制實例分析JS事件流與事件處理程序實例分析js事件觸發操作實例分析Node.js事件的正確使用方法JS事件綁定的常用方式實例總結js事件on動態綁定數據,綁定多個事件的方法

  3. 本文相關:
  4. 微信公眾號 客服接口的開發實例詳解
  5. 微信小程序 地圖map實例詳解
  6. 微信小程序 template模板詳解及實例
  7. 微信小程序中使用promise進行異步流程處理的實例詳解
  8. 網站上面有這種切換效果
  9. 微信小程序 頁面滑動事件的實例詳解
  10. 微信小程序 動態的設置圖片的高度和寬度詳解及實例代碼
  11. 微信小程序 頁面跳轉傳遞值幾種方法詳解
  12. 微信小程序富文本渲染引擎的詳解
  13. 通過修改referer下載文件的方法
  14. 請簡單說明javascript中處理事件的步驟
  15. 請說明JavaScript中處理事件的步驟
  16. javascript的事件處理?
  17. 請說明JavaScript中處理事件的步驟,說說步驟吧,謝謝
  18. (JavaScript)事件驅動及事件處理
  19. javascript的常用三種鼠標事件
  20. javascript 事件
  21. JavaScript中都有些什么事件?事件有什么作用?
  22. 如何利用javascript進行事件編程
  23. JavaScript事件及事件處理程序
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁javascript 處理事件綁定的一些兼容寫法js事件循環機制event loop宏任務微任務原理解析js事件機制----捕獲與冒泡機制實例分析js事件流與事件處理程序實例分析js事件觸發操作實例分析node.js事件的正確使用方法js事件綁定的常用方式實例總結js事件on動態綁定數據,綁定多個事件的方法微信公眾號 客服接口的開發實例詳解微信小程序 地圖map實例詳解微信小程序 template模板詳解及實例微信小程序中使用promise進行異步流程處理的實例詳解網站上面有這種切換效果微信小程序 頁面滑動事件的實例詳解微信小程序 動態的設置圖片的高度和寬度詳解及實例代碼微信小程序 頁面跳轉傳遞值幾種方法詳解微信小程序富文本渲染引擎的詳解通過修改referer下載文件的方法微信小程序 數組(增,刪,改,查微信小程序 for 循環詳解微信小程序 input輸入框控件詳解微信小程序 input輸入框詳解及簡微信小程序 小程序制作及動畫(a微信小程序 傳值取值的幾種方法總微信小程序中使元素占滿整個屏幕微信小程序 wx.request(接口調用微信小程序 時間格式化(util.fo微信小程序通過api接口將json數據判斷是否輸入完畢再激活提交按鈕javascript實現的分頁函數微信小程序 (一)新建項目hello weapp 詳微信小程序 歡迎界面開發的實例詳解微信小程序 websocket詳解及應用微信小程序微信支付接入開發實例詳解微信小程序 歡迎頁面的制作(源碼下載)微信小程序 刪除項目工程實現步驟微信小程序 animation api詳解及實例代碼詳解微信小程序入門五: wxml文件引用、模
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载