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/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
node基于async/await对mysql进行封装
Jun 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python自动生成model文件过程详解
2019/11/02 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
护理不良事件检讨书
2014/02/06 职场文书
党校毕业心得体会
2014/09/13 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript