浅谈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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
ES6中的类(Class)示例详解
Dec 09 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
python中的函数用法入门教程
2014/09/02 Python
python计算时间差的方法
2015/05/20 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python中一些深不见底的“坑”
2019/06/12 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python中doctest库实例用法
2020/12/31 Python
python爬取抖音视频的实例分析
2021/01/19 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
公务员培训自我鉴定
2013/09/19 职场文书
英语硕士生求职简历的自我评价
2013/10/15 职场文书
社区健康教育工作方案
2014/06/03 职场文书
高三语文复习计划
2015/01/19 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript