浅谈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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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/02/18 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python关键字and和or用法实例
2015/05/28 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
基于python历史天气采集的分析
2019/02/14 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
大学学生会竞选演讲稿
2014/04/25 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
杨善洲电影观后感
2015/06/04 职场文书
演讲比赛主持词
2015/06/29 职场文书
环保主题班会教案
2015/08/13 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL