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

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

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

本文實例講述了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(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)聽到
      d.οnchange=function () {
        alert('內(nèi)容發(fā)生改變')
      }
    }
  </script>
</head>
<body>
<input type="text" id="d" value="">
</body>
</html>

鍵盤事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鍵盤事件</title>
  <script>
    window.οnlοad=function () {
      window.οnkeypress=function (e) {
       //  alert(e.key)//彈出按鍵對應(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)自帶事件參考表供大家參考查詢：

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

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

您可能感興趣的文章:

相關(guān)文章

基于javascript的JSON格式頁面展示美化方法
本文介紹的方法基于javascript，css和myFunction結(jié)合可實現(xiàn)頁面展示轉(zhuǎn)換，下面有個示例，大家可以參考下
2014-07-07
ES5 ES6中Array對象去除重復(fù)項的方法總結(jié)
這篇文章主要給大家介紹了Array對象去除重復(fù)項的相關(guān)資料，文中通過示例代碼詳細(xì)介紹了在ES5和ES6中Array對象去除重復(fù)項的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-04-04
JavaScript中的FileReader圖片預(yù)覽上傳功能實現(xiàn)代碼
本文通過實例代碼給大家介紹了js中的FileReader圖片預(yù)覽上傳功能，代碼分為html和js代碼兩部分，具體實現(xiàn)代碼大家參考下本文
2017-07-07
echarts自定義legend樣式的詳細(xì)圖文教程
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下
2022-10-10
（推薦一個超好的JS函數(shù)庫）S.Sams Lifexperience ScriptClassLib
（推薦一個超好的JS函數(shù)庫）S.Sams Lifexperience ScriptClassLib...
2007-04-04
js數(shù)字舍入誤差以及解決方法(必看篇)
下面小編就為大家?guī)硪黄猨s數(shù)字舍入誤差以及解決方法(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
js確認(rèn)刪除對話框適用于a標(biāo)簽及submit
這篇文章主要介紹的是一個js確認(rèn)刪除對話框適用于a標(biāo)簽及submit，非常好用，需要的朋友不要錯過
2014-07-07
JS實現(xiàn)的數(shù)字格式化功能示例
這篇文章主要介紹了JS實現(xiàn)的數(shù)字格式化功能,結(jié)合實例形式分析了javascript針對數(shù)字與字符的相關(guān)運(yùn)算處理技巧,需要的朋友可以參考下
2017-02-02
JavaScript三大重點(diǎn)同步異步與作用域和閉包及原型和原型鏈詳解
這篇文章主要介紹了JavaScript同步異步與作用域和閉包及原型和原型鏈，每個對象都連接到一個原型對象，并且它可以從中繼承屬性。所有通過對象字面量創(chuàng)建的對象都連接到object.prototype，它是JavaScript中的標(biāo)配對象<BR>
2022-07-07
JS實現(xiàn)漂亮的時間選擇框效果
這篇文章主要介紹了JS實現(xiàn)漂亮的時間選擇框效果,結(jié)合實例形式分析了javascript時間選擇框插件的實現(xiàn)與使用方法,需要的朋友可以參考下
2016-08-08