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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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代码的函数 提高程序安全性
2010/03/02 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
javascript简易画板开发
2020/04/12 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python 的类、继承和多态详解
2017/07/16 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python单元测试与测试用例简析
2019/11/09 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python的pygame安装教程详解
2020/02/10 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
《白鹅》教学反思
2014/04/13 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js