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

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

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

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

示例代碼：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML文件</title>
  <script>
    window.οnlοad=function () {
      var d=document.getElementById('d');
      //內容發(fā)生改變，并焦點發(fā)生改變，才可以監(jiān)聽到
      d.οnchange=function () {
        alert('內容發(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)//彈出按鍵對應的字母
       //  alert(e.keyCode)
        if (e.charCode==103){
          alert('G鍵被點擊')
        }
      }
    }
  </script>
</head>
<body>
</body>
</html>

鼠標事件：

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

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

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

更多關于JavaScript相關內容可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》

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

您可能感興趣的文章: