浅谈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中暂停功能的实现代码
Mar 04 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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删除字符串最后一个字符的三种方法
2016/08/30 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Pandas分组与排序的实现
2019/07/23 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python中logging日志库实例详解
2020/02/19 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
音乐专业自荐信
2014/02/07 职场文书
学生手册评语
2014/05/05 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
介绍信范文大全
2015/05/07 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android