浅谈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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
php + nginx项目中的权限详解
2017/05/23 PHP
实测jquery data()如何存值
2013/08/18 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python读取oracle函数返回值
2016/07/18 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python导入pandas具体步骤方法
2019/06/23 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python中url标签使用知识点总结
2020/01/16 Python
python 实现性别识别
2020/11/21 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python爬虫开发与项目实战
2020/12/16 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
校班主任推荐信范文
2013/12/03 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
应届生如何写自荐信
2014/01/05 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
宣传普通话标语
2014/06/27 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
品质保证书格式
2015/02/28 职场文书