JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例


Posted in Javascript onNovember 19, 2019

本文实例讲述了JavaScript(js)处理的HTML事件、键盘事件、鼠标事件。分享给大家供大家参考,具体如下:

JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

JavaScript(js)处理的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');
      //内容发生改变,并焦点发生改变,才可以监听到
      d.οnchange=function () {
        alert('内容发生改变')
      }
    }
  </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系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
vue实现购物车小案例
Sep 27 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 #Javascript
重置Redux的状态数据的方法实现
Nov 18 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
javascript 数组排序函数
2009/08/20 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
pandas实现选取特定索引的行
2018/04/20 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
django 外键model的互相读取方法
2018/12/15 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Golang并发工具Singleflight
2022/05/06 Golang