浅谈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学习4 浏览器的事件模型
Feb 07 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
Bootstrap精简教程
Nov 27 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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 md5下16位和32位的实现代码
2008/04/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
javascript复制对象使用说明
2011/06/28 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python进阶教程之异常处理
2014/08/30 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Python语言快速上手学习方法
2018/12/14 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
九年级英语教学反思
2014/01/31 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
医德医魂心得体会
2014/09/11 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python