浅谈Javascript事件对象


Posted in Javascript onFebruary 05, 2017

如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象。

document.onclick = function() {
 alert(arguments.length); //1
}

因为arguments[0]这样使用这个参数比较麻烦,所以我们可以传递一个参数evt来进行使用。

document.onmouseup = function(evt) {
 var e = evt || window.event;
 alert(e.button); //0为鼠标左键,1为滚轮,2为右键
 //基于浏览器可视区左上角的位置
 alert(e.clientX + ',' + e.clientY);
 //机器的分辨率
 alert(window.screen.width + ',' + window.screen.height);
 // 离屏幕左上角的位置
 alert(e.screenX + ',' + e.screenY);
}
//侦测按键
document.onclick = function(evt) {
 alert(getKey(evt));
}
function getKey(evt) {
 var e = evt || window.event;
 var keys = [];
 if (e.shiftKey) {
 keys.push('shift');
 }
 if (e.ctrlKey) {
 keys.push('ctrl');
 }
 if (e.altKey) {
 keys.push('alt');
 }
 return keys;
}
//键盘事件,keydown是按下任意键,keyup是弹起任意键,keypress按下字符键触发
//键码:键盘上任意键,全兼容
//字符编码:可以输出的字符的键,IE不兼容
document.onkeydown=function(evt){
 var e = evt || window.event;
 alert(e.keyCode); //keyCode返回键码
 }
document.onkeypress = function(evt) {
 var e = evt || window.event;
 alert(e.charCode);  //charCode返回字符键码
 }
document.onclick = function(evt) {
 var e = evt || window.event;
 alert(e.target.innerHTML);  //点到哪里target就选中哪个元素
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
Highcharts学习之数据列
Aug 03 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
js中创建对象的几种方式
Feb 05 #Javascript
js实现增加数字显示的环形进度条效果
Feb 05 #Javascript
JS实现复制内容到剪贴板功能
Feb 05 #Javascript
js实现适合新闻类图片的轮播效果
Feb 05 #Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
thinkjs之页面跳转同步异步操作
Feb 05 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
第六章 php目录与文件操作
2011/12/30 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Mac下安装vue
2018/04/11 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python中修改字符串的四种方法
2018/11/02 Python
使用python进行拆分大文件的方法
2018/12/10 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
对Python函数设计规范详解
2019/07/19 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
热情服务标语
2014/10/07 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年大学生实习评语
2015/03/25 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python