整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          值得收藏的HTML DOM事件和鼠標鍵盤事件

          得收藏的HTML DOM事件和鼠標鍵盤事件

          onabort//圖像的加載被中斷。

          onblur//元素失去焦點。

          onchange//域的內容被改變。

          onclick//當用戶點擊某個對象時調用的事件句柄。

          ondblclick//當用戶雙擊某個對象時調用的事件句柄。

          onerror//在加載文檔或圖像時發生錯誤。

          onfocus//元素獲得焦點。

          onkeydown//某個鍵盤按鍵被按下。

          onkeypress//某個鍵盤按鍵被按下并松開。

          onkeyup//某個鍵盤按鍵被松開。

          onload//一張頁面或一幅圖像完成加載。

          onmousedown//鼠標按鈕被按下。

          onmousemove//鼠標被移動。

          onmouseout//鼠標從某元素移開。

          onmouseover//鼠標移到某元素之上。

          onmouseup//鼠標按鍵被松開。

          onreset//重置按鈕被點擊。

          onresize//窗口或框架被重新調整大小。

          onselect//文本被選中。

          onsubmit//確認按鈕被點擊。

          onunload//用戶退出頁面。

          值得收藏的HTML DOM事件和鼠標鍵盤事件

          altKey//返回當事件被觸發時,"ALT" 是否被按下。

          button//返回當事件被觸發時,哪個鼠標按鈕被點擊。

          clientX//返回當事件被觸發時,鼠標指針的水平坐標。

          clientY//返回當事件被觸發時,鼠標指針的垂直坐標。

          ctrlKey//返回當事件被觸發時,"CTRL" 鍵是否被按下。

          metaKey//返回當事件被觸發時,"meta" 鍵是否被按下。

          relatedTarget//返回與事件的目標節點相關的節點。

          screenX//返回當某個事件被觸發時,鼠標指針的水平坐標。

          screenY//返回當某個事件被觸發時,鼠標指針的垂直坐標。

          shiftKey//返回當事件被觸發時,"SHIFT" 鍵是否被按下。

          值得收藏的HTML DOM事件和鼠標鍵盤事件

          以上內容為互聯網收集感謝關注與收藏

          HTML DOM 事件

          HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

          事件通常與函數結合使用,函數不會在事件發生前被執行! (如用戶點擊按鈕)。

          提示: 在 W3C 2 級 DOM 事件中規范了事件模型。

          HTML DOM 事件

          DOM: 指明使用的 DOM 屬性級別。

          鼠標事件

          屬性描述DOM
          onclick當用戶點擊某個對象時調用的事件句柄。2
          oncontextmenu在用戶點擊鼠標右鍵打開上下文菜單時觸發
          ondblclick當用戶雙擊某個對象時調用的事件句柄。2
          onmousedown鼠標按鈕被按下。2
          onmouseenter當鼠標指針移動到元素上時觸發。2
          onmouseleave當鼠標指針移出元素時觸發2
          onmousemove鼠標被移動。2
          onmouseover鼠標移到某元素之上。2
          onmouseout鼠標從某元素移開。2
          onmouseup鼠標按鍵被松開。2

          鍵盤事件

          屬性描述DOM
          onkeydown某個鍵盤按鍵被按下。2
          onkeypress某個鍵盤按鍵被按下并松開。2
          onkeyup某個鍵盤按鍵被松開。2

          框架/對象(Frame/Object)事件

          屬性描述DOM
          onabort圖像的加載被中斷。 ( <object>)2
          onbeforeunload該事件在即將離開頁面(刷新或關閉)時觸發2
          onerror在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)
          onhashchange該事件在當前 URL 的錨部分發生修改時觸發。
          onload一張頁面或一幅圖像完成加載。2
          onpageshow該事件在用戶訪問頁面時觸發
          onpagehide該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發
          onresize窗口或框架被重新調整大小。2
          onscroll當文檔被滾動時發生的事件。2
          onunload用戶退出頁面。 ( <body> 和 <frameset>)2

          表單事件

          屬性描述DOM
          onblur元素失去焦點時觸發2
          onchange該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)2
          onfocus元素獲取焦點時觸發2
          onfocusin元素即將獲取焦點時觸發2
          onfocusout元素即將失去焦點時觸發2
          oninput元素獲取用戶輸入時觸發3
          onreset表單重置時觸發2
          onsearch用戶向搜索域輸入文本時觸發 ( <input="search">)
          onselect用戶選取文本時觸發 ( <input> 和 <textarea>)2
          onsubmit表單提交時觸發2

          剪貼板事件

          屬性描述DOM
          oncopy該事件在用戶拷貝元素內容時觸發
          oncut該事件在用戶剪切元素內容時觸發
          onpaste該事件在用戶粘貼元素內容時觸發

          打印事件

          屬性描述DOM
          onafterprint該事件在頁面已經開始打印,或者打印窗口已經關閉時觸發
          onbeforeprint該事件在頁面即將開始打印時觸發

          拖動事件

          事件描述DOM
          ondrag該事件在元素正在拖動時觸發
          ondragend該事件在用戶完成元素的拖動時觸發
          ondragenter該事件在拖動的元素進入放置目標時觸發
          ondragleave該事件在拖動元素離開放置目標時觸發
          ondragover該事件在拖動元素在放置目標上時觸發
          ondragstart該事件在用戶開始拖動元素時觸發
          ondrop該事件在拖動元素放置在目標區域時觸發

          多媒體(Media)事件

          事件描述DOM
          onabort事件在視頻/音頻(audio/video)終止加載時觸發。
          oncanplay事件在用戶可以開始播放視頻/音頻(audio/video)時觸發。
          oncanplaythrough事件在視頻/音頻(audio/video)可以正常播放且無需停頓和緩沖時觸發。
          ondurationchange事件在視頻/音頻(audio/video)的時長發生變化時觸發。
          onemptied當期播放列表為空時觸發
          onended事件在視頻/音頻(audio/video)播放結束時觸發。
          onerror事件在視頻/音頻(audio/video)數據加載期間發生錯誤時觸發。
          onloadeddata事件在瀏覽器加載視頻/音頻(audio/video)當前幀時觸發觸發。
          onloadedmetadata事件在指定視頻/音頻(audio/video)的元數據加載后觸發。
          onloadstart事件在瀏覽器開始尋找指定視頻/音頻(audio/video)觸發。
          onpause事件在視頻/音頻(audio/video)暫停時觸發。
          onplay事件在視頻/音頻(audio/video)開始播放時觸發。
          onplaying事件在視頻/音頻(audio/video)暫?;蛘咴诰彌_后準備重新開始播放時觸發。
          onprogress事件在瀏覽器下載指定的視頻/音頻(audio/video)時觸發。
          onratechange事件在視頻/音頻(audio/video)的播放速度發送改變時觸發。
          onseeked事件在用戶重新定位視頻/音頻(audio/video)的播放位置后觸發。
          onseeking事件在用戶開始重新定位視頻/音頻(audio/video)時觸發。
          onstalled事件在瀏覽器獲取媒體數據,但媒體數據不可用時觸發。
          onsuspend事件在瀏覽器讀取媒體數據中止時觸發。
          ontimeupdate事件在當前的播放位置發送改變時觸發。
          onvolumechange事件在音量發生改變時觸發。
          onwaiting事件在視頻由于要播放下一幀而需要緩沖時觸發。

          動畫事件

          事件描述DOM
          animationend該事件在 CSS 動畫結束播放時觸發
          animationiteration該事件在 CSS 動畫重復播放時觸發
          animationstart該事件在 CSS 動畫開始播放時觸發

          過渡事件

          事件描述DOM
          transitionend該事件在 CSS 完成過渡后觸發。

          其他事件

          事件描述DOM
          onmessage該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
          onmousewheel已廢棄。 使用 onwheel 事件替代
          ononline該事件在瀏覽器開始在線工作時觸發。
          onoffline該事件在瀏覽器開始離線工作時觸發。
          onpopstate該事件在窗口的瀏覽歷史(history 對象)發生改變時觸發。
          onshow該事件當 <menu> 元素在上下文菜單顯示時觸發
          onstorage該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
          ontoggle該事件在用戶打開或關閉 <details> 元素時觸發
          onwheel該事件在鼠標滾輪在元素上下滾動時觸發

          事件對象

          常量

          靜態變量描述DOM
          CAPTURING-PHASE當前事件階段為捕獲階段(3)1
          AT-TARGET當前事件是目標階段,在評估目標事件(1)2
          BUBBLING-PHASE當前的事件為冒泡階段 (2)3

          屬性

          屬性描述DOM
          bubbles返回布爾值,指示事件是否是起泡事件類型。2
          cancelable返回布爾值,指示事件是否可擁可取消的默認動作。2
          currentTarget返回其事件監聽器觸發該事件的元素。2
          eventPhase返回事件傳播的當前階段。2
          target返回觸發此事件的元素(事件的目標節點)。2
          timeStamp返回事件生成的日期和時間。2
          type返回當前 Event 對象表示的事件的名稱。2

          方法

          方法描述DOM
          initEvent()初始化新創建的 Event 對象的屬性。2
          preventDefault()通知瀏覽器不要執行與事件關聯的默認動作。2
          stopPropagation()不再派發事件。2

          目標事件對象

          方法

          方法描述DOM
          addEventListener()允許在目標事件中注冊監聽事件(IE8 = attachEvent())2
          dispatchEvent()允許發送事件到監聽器上 (IE8 = fireEvent())2
          removeEventListener()運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())2

          事件監聽對象

          方法

          方法描述DOM
          handleEvent()把任意對象注冊為事件處理程序2

          文檔事件對象

          方法

          方法描述DOM
          createEvent()2

          鼠標/鍵盤事件對象

          屬性

          屬性描述DOM
          altKey返回當事件被觸發時,"ALT" 是否被按下。2
          button返回當事件被觸發時,哪個鼠標按鈕被點擊。2
          clientX返回當事件被觸發時,鼠標指針的水平坐標。2
          clientY返回當事件被觸發時,鼠標指針的垂直坐標。2
          ctrlKey返回當事件被觸發時,"CTRL" 鍵是否被按下。2
          Location返回按鍵在設備上的位置3
          charCode返回onkeypress事件觸發鍵值的字母代碼。2
          key在按下按鍵時返回按鍵的標識符。3
          keyCode返回onkeypress事件觸發的鍵的值的字符代碼,或者 onkeydown 或 onkeyup 事件的鍵的代碼。2
          which返回onkeypress事件觸發的鍵的值的字符代碼,或者 onkeydown 或 onkeyup 事件的鍵的代碼。2
          metaKey返回當事件被觸發時,"meta" 鍵是否被按下。2
          relatedTarget返回與事件的目標節點相關的節點。2
          screenX返回當某個事件被觸發時,鼠標指針的水平坐標。2
          screenY返回當某個事件被觸發時,鼠標指針的垂直坐標。2
          shiftKey返回當事件被觸發時,"SHIFT" 鍵是否被按下。2

          方法

          方法描述W3C
          initMouseEvent()初始化鼠標事件對象的值2
          initKeyboardEvent()初始化鍵盤事件對象的值3

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          OM事件是Web開發中的一個核心概念,它允許JavaScript響應用戶與網頁交互的各種行為。DOM(文檔對象模型)是一個跨平臺和語言獨立的接口,它讓程序能夠動態地訪問和更新文檔的內容、結構和樣式。DOM事件是這個模型中的一個關鍵組成部分,它提供了一種機制來捕捉和響應用戶的行為,如點擊、滾動、按鍵等。

          事件流

          DOM事件遵循一個稱為“事件流”的過程,該過程定義了從頁面中接收事件的順序。這個流程可以分為三個階段:

          1. 捕獲階段:事件從文檔根節點開始,向下傳遞到目標節點,它是事件的實際目標。
          2. 目標階段:事件到達目標節點,觸發目標節點上的監聽器。
          3. 冒泡階段:事件從目標節點開始,向上冒泡到文檔的根節點。

          開發者可以選擇在捕獲階段或冒泡階段添加事件監聽器,從而控制事件的處理時機。

          事件監聽器

          為了響應事件,開發者需要在DOM元素上注冊事件監聽器(也稱為事件處理程序)。這通常通過addEventListener方法實現。例如,以下代碼在一個按鈕元素上添加了一個點擊事件監聽器:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Button Click Example</title>
          </head>
          <body>
              <!-- 創建一個按鈕 -->
              <button id="myButton">點擊我</button>
          
              <!-- 引入JavaScript來處理點擊事件 -->
              <script>
                  // 獲取按鈕元素
                  const button = document.getElementById('myButton');
                  
                  // 為按鈕添加點擊事件監聽器
                  button.addEventListener('click', function(event) {
                      // 當按鈕被點擊時,顯示一個警告框
                      alert('按鈕被點擊了!');
                  });
              </script>
          </body>
          </html>
          

          當用戶點擊該按鈕時,會彈出一個警告框。

          事件對象

          當事件發生時,瀏覽器會創建一個事件對象,這個對象包含了與事件相關的所有信息,如觸發事件的元素、事件類型、發生時間等。事件對象會作為參數傳遞給事件處理函數,允許開發者在函數內部訪問這些信息。

          button.addEventListener('click', function(event) {
              console.log(event.target); // 輸出觸發事件的元素
          });
          

          常見的DOM事件類型

          DOM事件有很多種類型,以下是一些常見的事件類型:

          • click:用戶點擊元素時觸發。
          • dblclick:用戶雙擊元素時觸發。
          • mouseover:鼠標指針移到元素上方時觸發。
          • mouseout:鼠標指針離開元素時觸發。
          • keydown:用戶按下鍵盤鍵時觸發。
          • keyup:用戶釋放鍵盤鍵時觸發。
          • load:頁面完全加載后觸發。
          • resize:窗口或框架被重新調整大小時觸發。

          事件委托

          事件委托是一種常用的事件處理模式,它利用了DOM事件的冒泡原理。開發者可以在父元素上設置一個事件監聽器來管理所有子元素的相同事件。這種方式可以提高性能,減少內存使用,并簡化事件管理。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>List Item Click Example</title>
          </head>
          <body>
              <!-- 創建一個無序列表 -->
              <ul id="myList">
                  <li>列表項 1</li>
                  <li>列表項 2</li>
                  <li>列表項 3</li>
                  <li>列表項 4</li>
              </ul>
          
              <!-- 引入JavaScript來處理點擊事件 -->
              <script>
                  // 為整個列表添加點擊事件監聽器
                  document.getElementById('myList').addEventListener('click', function(event) {
                      // 檢查被點擊的元素是否是列表項
                      if (event.target.tagName === 'LI') {
                          // 如果是列表項,顯示一個警告框
                          alert('列表項被點擊!');
                      }
                  });
              </script>
          </body>
          </html>
          

          在這個例子中,點擊任何列表項都會觸發事件處理函數,盡管監聽器是在它們的父元素上注冊的。

          結論

          DOM事件是與用戶交互不可或缺的一部分,它們使得前端開發者能夠創建動態和響應式的網頁。理解事件的工作原理以及如何有效地使用它們是每個前端開發者必備的技能。隨著技術的不斷進步,DOM事件的API和模型也在不斷演變,但其基本原理和實踐仍然是構建現代Web應用的基石。


          主站蜘蛛池模板: 一区二区三区在线| 老熟妇仑乱视频一区二区| 51视频国产精品一区二区| 一区二区三区无码高清视频| 亚洲一区二区影视| 日韩精品一区二区三区四区| 一区二区三区四区视频在线| 日韩伦理一区二区| 在线视频一区二区三区四区| 亚洲欧美一区二区三区日产 | 激情亚洲一区国产精品| 成人精品视频一区二区三区不卡| 免费一区二区视频| 色综合视频一区二区三区 | 91精品一区二区综合在线| 一本AV高清一区二区三区| 久久久久国产一区二区三区| 一区二区三区波多野结衣| 午夜精品一区二区三区在线观看| 日本精品一区二区三区在线视频| 国产一区二区精品久久91| 免费无码一区二区| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 深田咏美AV一区二区三区| 极品尤物一区二区三区| 亚洲av综合av一区二区三区 | 亚洲视频在线观看一区| 日韩一区二区在线观看视频| 精品无码AV一区二区三区不卡 | 亚洲爆乳精品无码一区二区| 免费无码一区二区三区蜜桃大| 日本一区二区三区精品视频| 美女视频一区二区三区| 好湿好大硬得深一点动态图91精品福利一区二区 | 激情亚洲一区国产精品| 精品国产一区二区三区久| 一区二区在线视频观看| 一区二区三区人妻无码| 亚洲一区中文字幕| 免费国产在线精品一区| 亚洲乱码国产一区三区|