浅谈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 相关文章推荐
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
JS原形与原型链深入详解
May 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
PHP中设置时区方法小结
2012/06/03 PHP
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
js实现验证码功能
2020/07/24 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python如何爬取网页中的文字
2020/07/28 Python
8种常用的Python工具
2020/08/05 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
优质服务演讲稿
2014/05/14 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
分居协议书范本
2014/11/03 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
三八妇女节寄语
2015/02/27 职场文书
总结Python常用的魔法方法
2021/05/25 Python
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL