快捷導(dǎo)航

JavaScript(js)處理的HTML事件、鍵盤(pán)事件、鼠標(biāo)事件簡(jiǎn)單示例

更新時(shí)間：2019年11月19日 09:17:56 作者：xuehyunyu

這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤(pán)事件、鼠標(biāo)事件,結(jié)合實(shí)例形式分析了JavaScript針對(duì)HTML事件、鍵盤(pán)事件及鼠標(biāo)事件的簡(jiǎn)單處理方法,需要的朋友可以參考下

本文實(shí)例講述了JavaScript(js)處理的HTML事件、鍵盤(pán)事件、鼠標(biāo)事件。分享給大家供大家參考，具體如下：

示例代碼：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML文件</title>
  <script>
    window.οnlοad=function () {
      var d=document.getElementById('d');
      //內(nèi)容發(fā)生改變，并焦點(diǎn)發(fā)生改變，才可以監(jiān)聽(tīng)到
      d.οnchange=function () {
        alert('內(nèi)容發(fā)生改變')
      }
    }
  </script>
</head>
<body>
<input type="text" id="d" value="">
</body>
</html>

鍵盤(pán)事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鍵盤(pán)事件</title>
  <script>
    window.οnlοad=function () {
      window.οnkeypress=function (e) {
       //  alert(e.key)//彈出按鍵對(duì)應(yīng)的字母
       //  alert(e.keyCode)
        if (e.charCode==103){
          alert('G鍵被點(diǎn)擊')
        }
      }
    }
  </script>
</head>
<body>
</body>
</html>

鼠標(biāo)事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標(biāo)事件</title>
  <script>
    window.οnlοad=function () {
      var input=document.getElementById('b');
      input.οnclick=function () {
        alert('按鈕被點(diǎn)擊了');
      }
      var c= document.getElementById('c');
      c.οndblclick=function () {
        alert('雙擊')
      }
    }
  </script>
</head>
<body>
<input type="button" id="b" value="點(diǎn)擊">
<input type="button" id="c" value="雙擊">
</body>
</html>

PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢(xún)：

javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解
這篇文章主要介紹了微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-03-03
js實(shí)現(xiàn)上傳圖片到服務(wù)器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片到服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript關(guān)鍵字this的使用方法詳解
與其他語(yǔ)言相比,函數(shù)的 this 關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同,此外,在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有一些差別,本文就給大家講解一下JavaScript關(guān)鍵字中的this,需要的朋友可以參考下
2023-08-08
JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
eslint 的三大通用規(guī)則詳解
這篇文章主要介紹了eslint 的三大通用規(guī)則詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
如何寫(xiě)出優(yōu)雅的JS 代碼
在開(kāi)發(fā)中，變量名，函數(shù)名一般要做到清晰明了，盡量做到看名字就能讓人知道你的意圖，所以變量和函數(shù)命名是挺重要，今天來(lái)看看如果較優(yōu)雅的方式給變量和函數(shù)命名。
2021-05-05
微信小程序?qū)崿F(xiàn)的圖片保存功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的圖片保存功能,結(jié)合實(shí)例形式分析了微信小程序wx.downloadFile({})及wx.saveImageToPhotosAlbum({})函數(shù)圖片保存功能相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04
javascript 延遲加載技術(shù)(lazyload)簡(jiǎn)單實(shí)現(xiàn)
延遲加載技術(shù)(簡(jiǎn)稱(chēng)lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.
2011-01-01
layui+ssm實(shí)現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能
在使用layui加載后端數(shù)據(jù)請(qǐng)求時(shí),對(duì)數(shù)據(jù)選項(xiàng)框進(jìn)行雙擊即可實(shí)現(xiàn)數(shù)據(jù)的輸入編輯更改,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12