浅谈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学习(二)javascript常见问题总结
Jan 02 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
angular2使用简单介绍
Mar 01 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
vue之延时刷新实例
Nov 14 Javascript
微信小程序实现页面浮动导航
Jan 08 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中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php文件包含的几种方式总结
2019/09/19 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
python+mysql实现简单的web程序
2014/09/11 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
基于python实现百度翻译功能
2019/05/09 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python实现简单飞行棋
2020/02/06 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
生产副总岗位职责
2013/11/28 职场文书
干部现实表现材料
2014/02/13 职场文书
校庆标语集锦
2014/06/25 职场文书
英文升职感谢信
2015/01/23 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
redis缓存存储Session原理机制
2021/11/20 Redis