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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
Symfony查询方法实例小结
2017/06/28 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python列表计数及插入实例
2014/12/17 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Django开发的简易留言板案例详解
2018/12/04 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
工作迟到检讨书
2014/02/21 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
作文之亲情600字
2019/09/23 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技