浅谈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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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面向对象 字段的声明与使用
2012/06/14 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python 控制语句
2011/11/03 Python
python交互式图形编程实例(三)
2017/11/17 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python的高阶函数用法实例分析
2019/04/11 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Django框架 querySet功能解析
2019/09/04 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
开学典礼演讲稿
2014/05/23 职场文书
应届生求职信范文
2014/05/26 职场文书
面试自我评价范文
2014/09/17 职场文书
交通安全教育主题班会
2015/08/12 职场文书
python process模块的使用简介
2021/05/14 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫