浅谈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的ajax功能实现web service的json转化
Aug 29 Javascript
javascript事件问题
Sep 05 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
如何在Vue中抽离接口配置文件
Oct 31 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生成静态页面的简单示例
2014/04/17 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
轮播的简单实现方法
2016/07/28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
在python3中实现更新界面
2020/02/21 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
优秀小学生家长评语
2014/01/30 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis